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

将实际文档对象（而不是String）传递给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中的更正

Slideup和Slidedown显示div

4 个答案: