Question

我想要实现的是上下一个div的动画，直到下一次点击停止并等待另一次点击再次开始制作动画。

这是动画我的div的功能：

function upAndDown(element,x) {

    $(element).animate({'top':'+='+x+'px'}, 'slow')
    .animate({'top':'-='+x+'px'}, 'slow',function(){upAndDown(element,x)});
};

$('.clickThis').click(function(){
    upAndDown('.moveThis',50);
});

我真的不知道如何得到我想要的东西！

谢谢

Answer 1

这实际上有点棘手，因为你有多个排队的动画和回调。

问题是如果你只是stop，然后再调用upAndDown，你将从当前位置开始制作动画，这意味着你可能偶尔在页面上移动。您也无法在jumpToEnd电话中stop()，因为您仍然可以拨回电话。

我通过在（适当地）对象移动时添加类moving来修复此问题。这在回调中用于决定是否保持动画。

你最终得到了这个：

http://jsfiddle.net/EkpNK/

现在，这会保持动画直到完成一个循环。如果您希望立即停止，可以拨打.stop(false, true)两次以停止两个动画并返回原始位置：

http://jsfiddle.net/EkpNK/1/

如果您想停在原地并从中断的地方继续，则需要一些额外的代码。

Answer 2

我的解决方案与Jeff B非常相似，但保持一些东西（IMO）更清洁，并使用jQuery.data（）函数来存储“动画”标志，而不是添加/删除类：

http://jsfiddle.net/HnK98/

jquery动画div上的多个单击事件

2 个答案: