对不起我对JQUery很新,想知道如何让Div滑下来?
JQuery让我很困惑,真的只需要帮助
答案 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)
当你说滑下来时,你的意思是:
$('#me').slideDown();
或
$('#me').css('position','relative').animate({top:'+200'},'slow');