Question

对不起我对JQUery很新，想知道如何让Div滑下来？

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 slideUp和Down取决于div是否已经可见，你可以使用.slideToggle（）而不是.slideDown（）

Answer 2

试试这个：

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 3

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

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

这是一个JSFiddle作为按钮在按下按钮时向下滑动的示例。

P.S。如果你正确使用Firebug或Chrome，你可以在这个页面上试试这个！

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

Answer 4

要向下滑动元素，只需使用：

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

当你说滑下来时，你的意思是：

通过向下滑动显示div：$('#me').slideDown();

或

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

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

如何让div滑落

5 个答案: