Slideup and Slidedown to reveal a div

你能告诉我怎样才能上下边框，然后滑下来揭示另一个div的内容。我希望内容div中的文本以与消息框底部边框相同的速度向下滑动。Slideup and Slidedown to reveal a 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'); 

    });

来源

2013-06-06 user2275009

document不是字符串

更换

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

与

$(document).ready(function() {

来源

2013-06-06 09:14:26 PSR

实际文档对象（而不是一个字符串）被传递到的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-06 09:14:38

谢谢凯文。它现在在工作。最好的祝福。 – user2275009

@ user2275009优秀，请接受它的工作。 –

纠正你的代码不把文档作为字符串和速度var当成字符串..

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

    });

来源

2013-06-06 09:17:08

var speed = 500; 

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

    });

更正你的jQuery

来源

2013-06-06 09:17:40 Sam

Slideup and Slidedown to reveal a div

回答

相关问题