Slideup 和 Slidedown 显示一个 div答案

【问题标题】：Slideup and Slidedown to reveal a divSlideup 和 Slidedown 显示一个 div
【发布时间】：2013-06-06 17:32:16
【问题描述】：

您能告诉我如何将带有上下边框的 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');

    });

【问题讨论】：

标签： jquery

【解决方案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/

【讨论】：

【解决方案2】：

document 不是字符串

替换

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

与

$(document).ready(function() {

【讨论】：

【解决方案3】：

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

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

    });

【讨论】：

【解决方案4】：

var speed = 500;

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

    });

jquery 中的更正

【讨论】：