我试图通过简单地更改背景颜色来“闪烁”输入框,然后使用 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)。
最佳答案
您需要使用 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);
});
}
关于javascript - jQuery 1.6.1 连续背景颜色动画请求失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29568171/