抱歉,我对JQuery很新,想知道如何使一个Div滑下来?
对我来说,JQuery很难理解,我真的需要帮助。
对我来说,JQuery很难理解,我真的需要帮助。
<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;
}
尝试以下方法,它应该有效 :)
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()
当你说滑动时,你是指:
$('#me').slideDown();
还是
$('#me').css('position','relative').animate({top:'+200'},'slow');
$(document).ready(function() {
$('.myDivClass').slideDown();
});
这里有一个JSFiddle作为示例,演示如何在按下按钮时使div向下滑动。
P.S. 如果您正在使用Firebug或Chrome,您可以立即在此页面上尝试此操作!
$('#hlogo').hide().slideDown('slow');
要将元素向下滑动,只需使用以下代码:
<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/
希望这能帮到你。