如何使div下滑？

Question

抱歉，我对JQuery很新，想知道如何使一个Div滑下来？

对我来说，JQuery很难理解，我真的需要帮助。

- Shawn Ily Holman

---

请查看链接：http://api.jquery.com/slideDown/。 - Kai

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

尝试以下方法，它应该有效 :)

- Shawn31313

---

你必须通过调用$(document).ready(function () { // code here // });来初始化DOM，以使JavaScript正常工作。 - zero_cool

Answer 2

HTML

<a id="click_to_slide">点击展开</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是否可见来使其slideUp和slideDown，你可以使用.slideToggle()而不是.slideDown()

- Jasper

Answer 3

当你说滑动时，你是指：

• 通过向下滑动使div出现：$('#me').slideDown();

还是

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

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

- rkw

Answer 4

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

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

这里有一个JSFiddle作为示例，演示如何在按下按钮时使div向下滑动。

P.S. 如果您正在使用Firebug或Chrome，您可以立即在此页面上尝试此操作！

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

- hayesgm

Answer 5

要将元素向下滑动，只需使用以下代码：

<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/

希望这能帮到你。

- Nathan