0

我正在编写一个非常酷的 jquery 插件，我发现自己被这最后一点所困扰。基本上我在 mouseenter 和 mouseleave 上为一个元素制作动画。一个很好的例子可以在这个 jsbin中找到，除了在 go 按钮完成动画之前将鼠标悬停在后退按钮上时，它会将图像移出屏幕。假设我知道元素的起始位置，即使动画提前停止，是否有办法阻止元素动画超过其原始位置？我需要.stop()用于动画。也许这很容易，我只是忽略了。

来自 jsbin 链接的代码片段：

// Start animation
$( "#go" ).mouseenter(function() {
    $( ".block" ).stop().animate({ left: "+=100px" }, 2000 );
});
// Start animation in the opposite direction
$( "#back" ).mouseenter(function() {
    $( ".block" ).stop().animate({ left: "-=100px" }, 2000 );
});
4

1 回答 1

1

stop接受控制动画如何离开的参数。您可能想要使用.stop(true, true)，它会在停止动画时将动画跳到结尾：

$( ".block" ).stop(true, true).animate({ left: "+=100px" }, 2000 );

...但它可能有点跳动。

或者，正如您所说，您知道元素从哪里开始，只需将其返回：

$( ".block" ).stop().css(originalPosition).animate({ left: "+=100px" }, 2000 );

... whereoriginalPosition是一个具有 和 属性的对象left，top大概。这也可能有点跳跃，这取决于您的用例的具体情况。

或者，再次，你有原始位置，你可以动画回到那个位置（或者向前移动到那个位置 + 100px，取决于）。

于 2013-09-23T16:31:19.823 回答