Question

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

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

我必须使用jquery版本1.6.1。在小提琴演示中，它使用的是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

颜色不是数值，因此无法设置动画。来自the jQuery documentation for .animate，强调我的：

除非如下所述，否则应将所有动画属性设置为单个数值。大多数非数字属性无法使用基本jQuery功能进行动画处理（例如，width，height或left可以设置动画，但background-color不能，除非使用jQuery.Color（）插件）。除非另有说明，否则属性值被视为多个像素。可以在适用的地方指定单位em和%。

如果您不想（或不能）使用jQuery.Color插件，则需要手动设置颜色＆＃34;，例如通过设置间隔并改变每一步的颜色。

Answer 2

你需要使用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);
    });
}

连续的背景色动画请求失败了jQuery 1.6.1

2 个答案: