Javascript 动画不'；不要在jquery中每次单击都触发

显然，此动画的目的是在300毫秒内将所有“可编辑”元素变为蓝色，然后在1000毫秒的过程中慢慢淡出身体背景色。基本上，使它们“闪烁”

当页面加载时，它似乎总是在第一次单击时按预期工作。然而，随着随后的点击，它只会周期性地触发，或者延迟很长时间。我想一个解决方案是不将这个动画排队，但环顾四周，我不清楚如何做到这一点。有什么想法吗？

---

提前谢谢

尝试在动画中添加一些停止点，如下所示：

$('#highlight_button').click( function (e) {
    var x = $('body').css('background-color');
    $('.editable').stop(true, true).animate({backgroundColor: '#0000ff'}, 300, function() {
                    $('.editable').stop(true, true).animate({backgroundColor: x}, 1000); 
    });
});

此外，仅链接第二个动画可能与将其放入回调中的效果相同

$('#highlight_button').click( function (e) {
    $('.editable').stop(true, true).animate({backgroundColor: '#0000ff'}, 300).animate({backgroundColor: $('body').css('background-color')}, 1000);
});

---

使用jQuery.animate时，从wich添加到动画堆栈的每个新动画都会播放。如果您不需要这样的行为，只需将

queue

param添加到动画参数中，这会使每个新动画停止。像这样：

$('.editable').animate({backgroundColor: x}, {duration:1000, queue:false}); 

---

陛下当我这样做的时候，它似乎把bgcolor变成蓝色，而不是动画来返回正常的bgcolor。非常感谢，非常感谢。似乎解决了我的问题。祝您度过愉快的一天此解决方案将产生开销，并删除元素之前（可能在另一个函数或脚本中）的所有其他动画。当ClearQUE设置为true时，How Way stop（）将增加开销。它与你的答案完全一样，然后以一种更简单的方式做一些！我唯一同意的是，它将停止在同一元素上运行的其他动画，但不会删除它们。对于大多数应用程序来说，这通常不是问题，建议对大多数动画使用stop（），以防止循环。因为您调用+1函数，并将使用动画堆栈。并且，由于您已经播放了，它将从堆栈中删除。

$('.editable').animate({backgroundColor: x}, {duration:1000, queue:false});