我遇到了使用JQuery切换动画的问题。我有一个菜单,它有子项目,在主项目悬停时滑开。这可以很好,但是,对于很长的项目列表,我宁愿能够停止打开,并关闭菜单,而不必等待slideDown()动画完成。
$('.menubar-topitem').on('mouseenter',function(){
$(this).children('.menubar-inner').stop(true).slideDown();
}).on('mouseleave',function(){
$(this).children('.menubar-inner').stop(true).slideUp();
});
此代码实现了我的要求,但是当我将鼠标悬停在菜单项上时,子菜单仅在动画到达之前打开,直到我第一次停止它。似乎JQuery存储了第一次停止动画时子菜单的高度,然后仅在第二次打开时才会打开。
我知道我可以通过使用stop(true,true)解决这个问题,但这会在动画中产生可怕的跳跃。无论如何,我可以在不必完成动画或任何解决方法的情况下阻止此行为,以便用户看不到任何跳转,而是看到一个流动的菜单系统?
答案 0 :(得分:3)
对此的修复是明确为硬编码值设置动画,而不是依赖于slideUp
/ slideDown
函数:
$('.menubar-topitem').on('mouseenter',function(){
var $this = $(this),
height = $this.children('.menubar-inner').children().height();
$this.children('.menubar-inner').stop().animate({height : height}, 250);
}).on('mouseleave',function(){
$(this).children('.menubar-inner').stop().animate({height : 0}, 250);
});
然后为动画元素将CSS overflow
属性设置为hidden
。另外,要动态获取.menubar-inner
元素的高度,您可以在其中嵌套div
并获取该div
元素的高度:
HTML -
<div class="menubar-topitem">
<h1>This is a Menu Top Item</h1>
<div class="menubar-inner">
<div>
<p>Some Content</p>
<p>Some More Content</p>
</div>
</div>
</div>
CSS -
.menubar-inner {
overflow : hidden;
height : 0;
}
以下是演示:http://jsfiddle.net/n6h2S/
您会遇到与fadeIn
/ fadeOut
相同的问题,但还有另一个名为fadeTo
的函数可让您明确将不透明度设置为淡入淡出。