javascript - jQuery 1.6.1 连续背景颜色动画请求失败

Question

我试图通过简单地更改背景颜色来“闪烁”输入框，然后使用 jquery 恢复到原始背景颜色以指示错误并引起用户的注意。

Here's a fiddle来展示我正在尝试做的事情。

我必须使用 jquery 1.6.1 版。在 fiddle 演示中，它使用的是 1.6.4，输入框的颜色根本没有改变。实际上，即使是 1.11，它也不起作用。在我使用我的代码进行的本地测试中，输入框在第一次动画调用时变为红色，但在第二次动画调用时没有做任何事情(将 bg 颜色恢复为白色)。它只是保持红色。

我正在使用非常相似的代码在另一个网站上做同样的事情，除了使用 jquery 1.11 并且它工作正常。

这只是兼容性问题吗？有什么方法可以使它在 1.6.1 版中正常工作吗？

代码如下:

function flashInputBox(id) {
    var input = $('#'+id);
    input.focus();
    input.stop(true).animate({'background-color': '#EC8686'}, 350, function() {
        input.stop(true).animate({'background-color': '#FFFFFF'}, 1000);
    });
}

我忘了说我正在使用 jQuery UI v1.8.18

问题现在已正确复制in this fiddle (相同的代码，只是添加了 jQuery UI 1.8.18)。

Answer 1

您需要使用 jQuery 吗？如果没有，这在使用关键帧的 CSS 中会更容易。如果是，请跳过我的 CSS 解释。

CSS

这仍然使用 jQuery，但它将动画工作交给了 CSS，使您的代码更易读。如果你想查看它，我在 jsFiddle 中进行了设置:jsFiddle Example

首先，设置一个关键帧:

@keyframes pulse{
    from {
        background: #ec8686;    
    }
    to {
        background: #ffffff;
    }
}

@-webkit-keyframes pulse{
    from {
        background: #ffffff;    
    }
    to {
        background: #ec8686;
    }
}

并将其附加到您现有的输入中:

#my-input{
    ...
    -webkit-animation: pulse 5s infinite;
    -webkit-animation-play-state: paused;
    ...
}

然后jQuery就变成了让动画播放几秒的事情了:

function doIt() {
    $("#my-input").css("-webkit-animation-play-state", "running");

     setTimeout(function() { 
           $("#my-input").css("-webkit-animation-play-state", "paused");
     }, 5000);
}

此外，您甚至不需要 jQuery 来触发动画。单击按钮可以直接触发 CSS 动画，但我认为您有某种代码来检查框中内容的准确性，所以我保留了您的旧功能。

请注意，此关键帧突然结束，因此您完全可以使用 0%、50%、100% 关键帧。

现在使用原始 jQuery 方式:

jQuery

对于您的 jQuery，直接指定您的输入(又名 $("#my-input-name"))或者如果它只是一个输入，我让它工作起来要容易得多只需使用以下代码即可:

function doIt() {
    ...
    input.stop().animate({'background-color': '#EC8686'}, 350, function() {
        // just say input here //
        input.animate({'background-color': '#FFFFFF'}, 1000);
    });
}