jquery slideToggle在停止调用后没有完全打开

我在使用JQuery切换动画时遇到问题。我有一个菜单，其中有子项，在主项目悬停时滑动打开。然而，对于一长串项目，我可以做到这一点，我宁愿能够停止开放，并滑动关闭菜单，而无需等待slideDown（）动画完成。jquery slideToggle在停止调用后没有完全打开

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

来源

2011-12-30 CodePB

尝试从'stop（true）'中删除'true'。 – Purag 2011-12-30 22:18:05

嗯，我喜欢用'.on（）'来看问题。 – Jasper 2011-12-30 22:22:47

@Purmou删除真实只是防止动画，甚至正常启动，而不是我得到一个静止的抖动效果。有关解决方案，请参阅下面接受的答案 – CodePB 2011-12-30 22:56:29

此解决方法是明确地动画硬编码的值，而不是依赖于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，它允许你明确地设置淡入的不透明度。

来源

2011-12-30 22:22:09 Jasper

谢谢，看起来它会做的伎俩。我需要解决一些CSS问题，以使它看起来很正确，但是滑动现在可以成为一种享受！ – CodePB 2011-12-30 22:42:06

谢谢你，几个CSS的变化，现在它完美的作品 – CodePB 2011-12-30 22:54:46

jquery slideToggle在停止调用后没有完全打开

回答

相关问题