Javascript jQuery.stop（）和UI.toggle（）幻灯片动画

我更喜欢jQuery UI的

.toggle（）

动画的效果和“幻灯片”效果，而不是jQuery的slideToggle动画。但是，

.stop（）

函数在两个选项之间的行为似乎并不相同：

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

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

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

---

是否可以使用jQuery UI的幻灯片效果来回复

.stop（）.slideToggle（）

的效果？

问题在于，在jQueryUI版本中调用

stop（）

时没有参数，因此在

mouseleave

上再次调用相同的幻灯片动画，但是从元素的当前位置调用。这意味着

div

将向上移动到按钮上方的较高位置，直到不再可见

要解决此问题，请使用

stop（true，true）

。这将停止动画，清除元素上所有排队的动画，并将元素置于允许完整动画完成时的状态，如下所示：

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

---

不管这种修复方法如何，我还是会使用标准的jQuery方法。

在这种情况下，我无法实现这一点——我感觉这与重新定义

$子菜单

变量有关，但我还没有找到解决方案。这也说明了为什么我更喜欢UI切换动画-它作为面板滑动，而不是显示内容。问题在于您使用了

children（）

，而不是

find（）

：有趣的是，我认为唯一的区别是它查找匹配元素的深度有多深。你有没有解释一下为什么会有这样的区别。不过，普通的老jQuery版本仍然要好得多：。我的jQueryUI不是很好。它做了很多非常严格的事情，这使得修改非常痛苦，尤其是在UI方面。有很多更好的选择，不仅仅是所有的引导。引导模拟的jQueryUI的幻灯片效果有什么影响？我只是想澄清一下——我希望整个面板看起来像是在向下滑动，而不是像普通的jQuery幻灯片那样简单地显示出来。