0

你能告诉我如何将带有顶部和底部边框的 div 向上滑动，然后向下滑动以显示另一个 div 的内容。我希望内容 div 中的文本以与消息框底部边框相同的速度向下滑动。

HTML是

<div id="message-box">
<div id="content">
Lorem ipsum dolor sit amet, minim accusamus dignissim has at, nec esse quas postea in. Vide harum id mei, aperiam legimus delectus an est. Sit quidam verear voluptatum ad, vim definiebas reprimique cu. Eu sea bonorum meliore, possim albucius complectitur vel et. Eum ne ferri persius abhorreant, mel in probatus pertinax, ex usu meliore corpora.
</div>
</div>

CSS是：

#message-box {
position:absolute;
left:20px;
top:40px;
height:450px;
width:200px;
background:#eee;
margin-left:0px;
text-align:center;
border-top: solid 1px #000;
border-bottom:solid 1px #000;

}

#content {
position:relative;
top:0px;
height:350px;
font-size:16px;
padding:20px;
color:#000;
display:none;
}

Jquery 是：

var speed = 500;

$('document').ready(function() {
$('#message-box').slideUp(speed).delay(50).slideDown('speed');

    });
4

4 回答 4

1

实际的文档对象（而不是字符串）在准备好的函数的选择器中传递给 jQuery。此外，该#content元素的display属性设置为none。您需要在动画完成后显示内容。

var speed = 500;

$(document).ready(function() {
    $('#message-box').slideUp(speed).delay(50).slideDown('speed', function(){
       $("#content").fadeIn();
    });
});

工作示例 http://jsfiddle.net/AEzUk/1/

于 2013-06-06T09:14:38.537 回答
0

document不是字符串

代替

$('document').ready(function() {

和

$(document).ready(function() {
于 2013-06-06T09:14:26.110 回答
0

更正您的代码不要将文档视为字符串并将速度变量视为字符串..

$(document).ready(function() {
var speed = 500;
$('#message-box').slideUp(speed).delay(50).slideDown(speed);

    });
于 2013-06-06T09:17:08.780 回答
0 
var speed = 500;

$(document).ready(function() {
$('#message-box').slideUp(speed).delay(50).slideDown('speed');

    });

jQuery 中的更正

于 2013-06-06T09:17:40.863 回答