Question

Clearly, the intention of this animation is to turn all “editable” elements to a blue color in 300 ms, and then slowly fade back to the body background color over the course of 1000 ms. Basically, make them “blink”.

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

When the page loads, it always seems to work as intended on the first click. However, with subsequent clicks it fires only periodically, or with a very long delay. I suppose a solution would involve not queuing this animation, but looking around it isn’t clear to me how to do this. Any thoughts?
Thanks in advance!

Answer 1

Try adding some stops to your animation, like so:

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

Also, just chaining the second animation would probably do the same as putting it in the callback.

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