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

我已经编写了一个函数来模拟“live”元素的更新。它随机选取一个元素，然后使用jQuery UI库中的

.animate（）

和

.effect（）

为其设置动画。但是，动画完成后，元素应返回其原始颜色，但由于某些原因，这种情况不会发生。找到下面的代码和

---

用给定的函数替换run函数

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

---

这必须有助于您：）

用给定函数替换您的run函数

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

---

这一定会对您有所帮助：）

您遇到了时间问题。 每次运行

run（）

，它都会根据DOM检查

原始

颜色。但是如果选中时DOM颜色仍然是绿色，而不是原始的，该怎么办

使用

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

---

你有时间问题。 每次运行

run（）

，它都会根据DOM检查

原始

颜色。但是如果选中时DOM颜色仍然是绿色，而不是原始的，该怎么办

使用

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

---

顺便说一句，您用$（element）定义-var a-，然后再次用$使用它。“a.animate”不好？我看不出有什么问题，因为a只是$（'.tile:nth child（x）'）。顺便说一句，你用$（element）定义-var a-，然后用$再次使用它。“a.animate”不好？我看这没问题，因为a只是$（'.tile:n个孩子（x）'））