如何让div向下滑动

Question

抱歉，我对 JQUery 很陌生，想知道如何制作 Div Slide Down？

JQuery 让我感到困惑，真的只需要帮助

Answer 1

试试这个：

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;
}

试试这个，它会起作用:)

Answer 2

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 向上和向下滑动取决于 div 是否已经可见，您可以使用 .slideToggle() 而不是 .slideDown()

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

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

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

这是一个 JSFiddle 作为示例，按下按钮时 div 会向下滑动。

PS 如果您正确使用 Firebug 或 Chrome，您现在就可以在此页面上尝试此操作！

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