javascript - jQuery UI 取消幻灯片动画？

Question

所以我有这个代码..

$('.hover-img').hover(function(e) {
    $(this).show("slide", { direction : "left" }, 500);
});

$('.hover-img').mouseleave(function(e) {
    $(this).stop(true, true).hide("slide", { direction : "left" }, 500);
});

当用户鼠标在幻灯片动画完成之前离开图像时，我只想让它停止并以另一种方式返回。这就是我通常会这样做的方式，但在使用 jQuery UI 幻灯片效果时它似乎不起作用。

为什么它不起作用？谢谢

Answer 1

尝试使用...

.stop(true, false)

确保动画在反转之前不会捕捉到结尾。您还应该在悬停处理程序中使用 $.stop() 。

$('.hover-img').hover(function(e) {
    $(this).stop(true, false).show(...);
});

$('.hover-img').mouseleave(function(e) {
    $(this).stop(true, false).hide(...);
});

此外，有关使用 $.stop() 和 $.animate() http://jsfiddle.net/fjVDy/1/的示例，请参阅此 JSFiddle

Answer 2

您的 .hide 语法有错误。 http://api.jquery.com/hide/ 它不能有 args (string, object, int)。