我正在尝试向显示/隐藏脚本添加动画/淡入淡出。
当用户单击“.show” anchor 时,我想将“.buttons”div向下滑动“.targetDiv”div的高度,之后我希望“.targetDiv”div淡入。
然后(如果可能),我希望在单击“.hide” anchor 时发生相反的操作 - 导致“.targetDiv”淡出,并且“.buttons”div向上滑动(回到其原始位置)。
感谢您的帮助!
jsFiddle:
http://jsfiddle.net/XwN2L/1296/
HTML:
<div id="content" class="targetDiv">Content</div>
<div class="buttons">
<a class="show" target="content">Show</a>
<a class="hide" target="content" style="float: right;">Hide</a>
</div>
JavaScript:
$('.targetDiv').hide();
$('.show').click(function () {
$('.targetDiv').hide();
$('#' + $(this).attr('target')).show();
});
$('.hide').click(function () {
$('#' + $(this).attr('target')).hide();
});
最佳答案
我会简单地使用jquery的slideUp/slideDown方法。
$('.targetDiv').hide();
$('.show').click(function () {
$('.targetDiv').hide();
$('#' + $(this).attr('target')).slideDown('slow');
});
$('.hide').click(function () {
$('#' + $(this).attr('target')).slideUp('slow');
});
如果您渴望滑动和淡出,请查看以下内容:
关于javascript - 动画显示/隐藏脚本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14419519/