Question

我写了一个模拟“直播”的更新功能。元件。它随机选择一个元素，然后使用jQuery UI库中的.animate()和.effect()对其进行动画处理。但是，一旦动画完成，元素应该返回到它的原始颜色，但由于某种原因，这不会发生。在下面找到代码和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

将运行功能替换为给定的功能。

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);
}

这必须帮助你：）

Answer 2

那里有时间问题。每次运行run()时，它都会根据DOM检查original颜色。但是，如果DOM颜色在选中时仍为绿色，而不是original？

，该怎么办？

对动画完成后发生的事情使用animate()回调函数是一种很好的做法。这样你知道动画已经完成并处于正确状态，而不是使用任意时间值。

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

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

2 个答案: