1
我希望我的“新闻箱”div从页面底部向上滑动到页面上方的页脚上方(稍微延迟一点),然后我想如果用户点击“newsClose”,DIV会下滑。尝试过的东西,但没有成功(在JS没有知识) - 为您的帮助向上滑动DIV,然后点击
的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;
}
此外,如果你决定使用jQuery的速记“$”的工作(这应该没问题),你可以坚持在代码的其余部分(用$替换jQuery),但这只是美观。 – Pevara