动画不会在jquery中的每次点击中触发

显然，此动画的目的是在300毫秒内将所有“可编辑”元素都变成蓝色，然后在整个过程中逐渐淡入身体背景颜色1000毫秒。基本上，让他们“眨眼睛”。动画不会在jquery中的每次点击中触发

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

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

来源

2011-12-25 B. VB.

尝试添加一些站到你的动画，就像这样：

$('#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); 
});

来源

2011-12-25 21:04:21 adeneo

嗯..当我这样做，它似乎变成了蓝色BGCOLOR，而不是动画返回正常的bgcolor – 2011-12-25 21:08:53

非常感谢，感激不尽。似乎解决了我的问题。祝您有个愉快的日子 – 2011-12-25 21:16:01

这个解决方案会产生开销，同时也删除元素之前的所有其他动画（可能在另一个函数或脚本中） – 2011-12-25 22:22:47

当你使用jQuery.animate，每个新的动画添加到动画堆栈，然后播放。如果你不需要这种行为，只需将queue参数添加到动画参数中，这会使每个新动画停止前一个动画参数。像这样：

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

来源

2011-12-25 22:19:36

动画不会在jquery中的每次点击中触发

回答

相关问题