Slideup and Slidedown to reveal a div

Question

你能告诉我如何滑动一个有上下边框的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');
    });

Answer 1

实际的文档对象(而不是字符串(被传递给ready函数选择器中的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/

Answer 2

document不是字符串

更换

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

带有

$(document).ready(function() {

Answer 3

纠正您的代码不将文档视为字符串，将var视为字符串。。

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

Answer 4

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

jquery 中的更正