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的函数可让您明确将不透明度设置为淡入淡出。

停止调用后，Jquery slideToggle未完全打开

1 个答案: