.animate（）不会将元素样式更改回原始样式

Question

I have written a function that simulates the update of a 'live' element. It picks an element at random and then animates it using .animate() and .effect() from the jQuery UI library. However, once the animations have finished the element should return back to it's original color, but for some reason this doesn't happen. Find below the code and JSFiddle .

var decider = Math.round(Math.random() * 6) + 1
var original = $('.tile:nth-child(' + decider + ')').css('background-color');
var a = $('.tile:nth-child(' + decider + ')');

$(a).animate({
    backgroundColor: 'green'
}).effect('shake', {
    distance: 5,
    times: 1
}, 1000).animate({
    backgroundColor: original
});
$(a).hover(function () {
    $(this).animate({
        backgroundColor: original
    }).finish();
});

Answer 1

replace your run function with the given one.

function run(){
    var decider = Math.round(Math.random() * 6) + 1
    var original = $('.tile:nth-child(' + decider + ')').css('background-color');
    var a = $('.tile:nth-child(' + decider + ')');

    $(a).animate({
        backgroundColor: 'green'
    }).effect('shake', {
        distance: 5,
        times: 1
    }, 1000).animate({
        backgroundColor: original
    });
    $(a).hover(function () {
        $(this).animate({
            backgroundColor: original
        }).finish();
        clearInterval(myVar);
    });
    var myVar = setTimeout(run, 1000);
}

this must help you :)

Answer 2

You have a timing issue there. Every time you are running run() , it checks for the original color depending on the DOM. But what if the DOM color is still green when checked, and not original ?

It's a good practice to use animate() callback function for stuff that happens after animation finishes. That way you know that animation has finished and at it's right state, instead of using a arbitrary time value.

function run(){
    var decider = Math.round(Math.random() * 6) + 1
    var original = $('.tile:nth-child(' + decider + ')').css('background-color');
    var a = $('.tile:nth-child(' + decider + ')');

    $(a).animate({
        backgroundColor: 'green'
    }).effect('shake', {
        distance: 5,
        times: 1
    }, 1000, function() {    
        // first animation finish, start second animation
        $(this).animate({
            backgroundColor: original
        }, 1000, function () {
           // second animation finish, re-run
           run();
        });
    });
}