如何让div滑落

时间:2011-07-27 03:02:55

标签: javascript jquery new-operator slidedown

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

JQuery让我很困惑,真的只需要帮助

5 个答案:

答案 0 :(得分:3)

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()

答案 1 :(得分: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;
}

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

答案 2 :(得分:0)

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

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

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

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

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

答案 3 :(得分:0)

要向下滑动元素,只需使用:

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

希望这会有所帮助。

答案 4 :(得分:0)

当你说滑下来时,你的意思是:

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

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

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