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 属性设置为动画元素的隐藏。另外，要动态获取 .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 的函数，它允许您显式设置要淡出的不透明度。