带有UI .toggle（）幻灯片动画的jQuery .stop（）

Question

我更喜欢jQuery UI的.toggle()动画效果与幻灯片＆＃39;对jQuery的slideToggle动画有影响。但是，似乎.stop()函数在两个选项之间的行为不相同：

jQuery('div').stop().toggle('slide', { 
  direction: 'up',
}, 200);

jQuery('div').stop().slideToggle();

我在悬停时调用这些函数，当元素快速上/下时，使用toggle（）的动画被破坏。这是一个示例 - 尝试快速悬停/关闭每个按钮以查看差异 - https://jsfiddle.net/v87r1pxb/1/

是否可以使用jQuery UI的幻灯片效果来重新定位.stop().slideToggle()的效果？

Answer 1

问题是因为你在jQueryUI版本中没有参数调用stop()，因此在mouseleave上再次调用相同的幻灯片动画，但是从元素的当前位置调用。这意味着div向上移动到按钮上方，使其不再可见。

要解决此问题，请使用stop(true, true)。这将停止动画，清除元素上的所有排队动画，并将元素置于允许完整动画完成时的状态，如下所示：

jQuery('#ui-button').hover(function() {
    jQuery('#ui').stop(true, true).toggle('slide', {
        direction: 'up',
    }, 200);
});

Working example

无论如何，无论如何我都会使用标准的jQuery方法。