是否有一种方法为标签/表单下面的'myContent'div有一个平滑的过渡,当我隐藏/显示它?
目前,当myContentdiv被切换时,它下面的其他元素会"跳"到适当的位置——如果我能想出一个方法把它们滑到正确的位置,那就太好了。你觉得呢?
JavaScript <>之前函数toggleDiv(divId) {jQuery("#" +divId)。切换("幻灯片",{方向:"});}ShowThing(divID) {jQuery("#" +divID)。显示("幻灯片",{方向:"}, 500);}HideThing(divID) {jQuery("#" +divID)。隐藏("幻灯片",{方向:"}, 500);}之前HTML
<a href="javascript:toggleDiv('myContent');" style="background-color: #ccc; padding: 5px 10px;">Toggle Button</a>
<button onclick="ShowThing('myContent');">Show</button>
<button onclick="HideThing('myContent');">Hide</button>
<div>
<div id="myContent" style="background-color: #aaa; padding: 5px 10px;">The content in this div will hide and show (toggle) when the toggle is pressed.
</div>
</div>
<div>
<label for="cool-field">Name</label>
<input type="text" name="cool-field" id="cool-field" />
</div>
点击这里查看jsFiddle
优化javascript,使所有代码都基于jQuery。
<a href="#" style="background-color: #ccc; padding: 5px 10px;" class="togglebtn">Toggle Button</a>
<button id="showthing">Show</button>
<button id="hidething">Hide</button>
<div>
<div id="myContent" style="background-color: #aaa; padding: 5px 10px;">The content in this div will hide and show (toggle) when the toggle is pressed.
</div>
</div>
<div>
<label for="cool-field">Name</label>
<input type="text" name="cool-field" id="cool-field" />
</div>
jQuery代码:$(function(){
$('a.togglebtn').click(function(){
$('#myContent').stop().slideToggle(500);
return false;
});
$('#showthing').click(function(){
$('#myContent').slideDown(500);
});
$('#hidething').click(function(){
$('#myContent').stop().slideUp(500);
});
});
您的jsfield为空白
可以用slideDown('slow');
代替show()
对于hide
,可以使用slideUp('slow');
,也可以设置方向。