Question

我希望我的“newsbox”div从页面底部向上滑动到页面加载上方的页脚上方（稍微延迟）然后我希望DIV在用户点击时向下滑动“ newsClose”。尝试了一些但没有成功（对js没有任何了解） - 感谢您的帮助

JS

$(document).ready(function() {
    jQuery('#newsbox').delay(2000).slideDown();
    jQuery(function() {
    jQuery('.newsClose').click(function (e) {
        e.preventDefault();
        jQuery('#newsbox').slideUp();
    }); 
});

HTML

<div id="newsbox">
    <div class="news-text">
        <p>Blablablablabla blablabla blablabla <a href="index.html">Blabla blabla</a></p>
      </div>
    <div class="news-close">
        <a href="#" class="newsClose">Close X</a></div>
    </div>
</div>

CSS

#newsbox {
    background-color: #CCC;
    display:none;
    width: 750px;
    z-index: 10000;
    float: left;
    position: fixed;
    bottom: 45px;
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
}

.news-text {
    float: left;
    width: 600px;

}
.news-text p {
    color: #666666;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    line-height: 13px;
}
.news-continue {
    float: left;
    width: 70px;
    text-align: center;
    margin-top: 10px;
    margin-left: 20px;
}
.news-close {
    width: 60px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}
.news-close a,
.news-text a {
    color: #3E718E;
}
.news-continue a,
.news-close a {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    line-height: 11px;
    font-weight: normal;
    color: #FFF;
    display: block;
    padding-top: 5px;
    padding-right: 0px;
    padding-bottom: 5px;
    padding-left: 0px;
    background-color: #3E718E;
}

.news-close a:hover {
    text-decoration: underline;
}
.news-continue a:hover,
.news-close a:hover {
    background-color: #333333;
    color: #FFF;
}

.news-close {
    float: right;
    width: 60px;
    font-size: 10px;
    line-height: 11px;
    text-align: right;
}

Answer 1

你很亲密。首先在你的小提琴上启用jQuery（它在左侧），然后消除你的第二个DOM就绪函数：

演示http://jsfiddle.net/7whAs/1/

$(document).ready(function() {
    jQuery('#newsbox').delay(2000).slideDown();
    jQuery('.newsClose').click(function (e) {
        e.preventDefault();
        jQuery('#newsbox').slideUp();
    }); 
});

在装载时向上滑动DIV，然后单击向下滑动

1 个答案: