1

我希望我的“新闻框”div 在页面加载时从页面底部向上滑动到页脚上方（稍有延迟），然后如果用户单击“newsClose”，我希望 DIV 向下滑动。尝试了一些但没有成功（对js一无所知）-感谢您的帮助

JSFiddle：http: //jsfiddle.net/7whAs/

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;
}
4

1 回答 1

5

你很亲密。首先在您的小提琴上启用 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();
    }); 
});
于 2013-05-27T21:24:21.687 回答