我在使用 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) 来解决这个问题,但这会在动画中产生可怕的跳跃。无论如何,我是否可以阻止这种行为,而无需完成动画或任何解决方法,以便用户看不到任何跳转,而是看到流动的菜单系统?
最佳答案
解决此问题的方法是显式对硬编码值进行动画处理,而不是依赖于 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
的函数,它允许您显式设置不透明度淡入淡出。
关于Jquery SlideToggle 在停止调用后未完全打开,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8684584/