如何制作div滑动

Question

对不起，我是JQUery的新手，想知道如何制作Div Slide？

jQuery是困惑我，真的只需要帮助

Answer 1

HTML

 
<a id="click_to_slide">Click To Slide Down</a> 
<div id="slide_me_down"></div> 

CSS

 
#slide_me_down { 
    display: none; 
    width: 100px; 
    height: 100px; 
    background-color: #000; 
} 

JAVASCRIPT

 
$(document).ready(function() { 
    $('#click_to_slide').live('click', function() { 
     $('#slide_me_down').slideDown(); 
    }); 
}); 

这里是上面代码的的jsfiddle ：http://jsfiddle.net/EfmeW/

此外，如果你想拥有DIV效果基本show和向下取决于DIV是否是已经可见或不可见，你可以使用.slideToggle（）代替.slideDown（）

Answer 2

使用以下的JQuery。由于JQuery使用CSS选择器来查找元素，因此您需要使用类myDivClass。 document.ready部分是为了确保在执行Javascript之前完全下载/解析页面（这是关键的一步）。

$(document).ready(function() { 
    $('.myDivClass').slideDown(); 
}); 

这里是一个JSFiddle作为一个例子具有一个div滑下上的按钮按压。

P.S.如果你正在使用Firebug或Chrome，你现在就可以在这个页面上尝试一下！

$('#hlogo').hide().slideDown('slow'); 

Answer 3

若要将元素滑下来，只是用这样的：这里

<script type="text/javascript"> 
$(document).ready(function() { 
$('#test').slideDown(); 
}); 
</script> 

<div id="test" style="background-color:lightgrey;border:2px solid grey;padding:10px;">Hello, this will slide down.</div> 

退房的例子：http://jsfiddle.net/WvVf3/1/

希望这有助于。

Answer 4

当你说滑下去，你的意思是：

• 使DIV出现由下滑：$('#me').slideDown();

或

• 使DIV滑下：$('#me').css('position','relative').animate({top:'+200'},'slow');

http://jsfiddle.net/rkw79/AnTDk/5/

Answer 5

试试这个：

HTML：

<button id="click_to_slide"></button> 
<div id="me_down" style="display:none;">I'm Sliding down</div> 

的Javascript：

$('#click_to_slide').click(function() { 
     $('#me_down').slideDown(); 
    }); 

和可选的CSS：

#me_down { 
    color:white; 
    width: 100px; 
    height: 100px; 
    background-color: #000; 
} 

试试这个，它会工作:)