Jquery SlideToggle 在停止调用后未完全打开

Question

我在使用 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) 来解决这个问题，但这会在动画中产生可怕的跳跃。无论如何，我是否可以阻止这种行为，而无需完成动画或任何解决方法，以便用户看不到任何跳转，而是看到流动的菜单系统？

Answer 1

解决此问题的方法是显式对硬编码值进行动画处理，而不是依赖于 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 的函数，它允许您显式设置不透明度淡入淡出。