jquery在动画div上的多次点击事件

Posted 2023-05-08

【中文标题】jquery在动画div上的多次点击事件

【英文标题】：jquery multiple click events over animated div

【发布时间】：2012-04-11 13:05:12

【问题描述】：

我想要实现的是使 div 上下动画，直到下一次单击它应该停止并等待再次单击以再次开始动画。

http://jsfiddle.net/WwJRD/

这是为我的 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);
);

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

谢谢

【参考方案1】：

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

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

我通过在（适当地）对象移动时添加一个类moving 来解决此问题。这在回调中用于决定是否继续动画。

你会得到这个：

http://jsfiddle.net/EkpNK/

现在，它会一直保持动画效果，直到完成一个循环。如果你想让它立即停止，你可以调用.stop(false, true)两次来停止两个动画并返回到原来的位置：

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

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

【参考方案2】：

我的解决方案与 Jeff B 的解决方案非常相似，但使事情 (IMO) 更简洁，并使用 jQuery.data() 函数来存储“动画”标志而不是添加/删除类：

http://jsfiddle.net/HnK98/