我有一个在 body 元素上运行的 CSS 动画，它的默认持续时间为 20 秒。我希望它能够通过用户输入进行更改，但我似乎无法让它工作。
我的默认 CSS 是:
body {
...
animation: MoveBG 20s ease infinite;
}
如果我运行这段 jQuery 代码:
$('body').css('animation', 'MoveBG 2s ease infinite');
动画仍会有 20 秒的持续时间。有趣的是，如果我运行:
alert($('body').css('animation-duration'));
它会告诉我动画持续时间是 2 秒(显然不是)。
// the animation duration should change to 2s, but it still animates at 20s
var animation = 'MoveBG 2s ease infinite';
$('body').css('animation', animation);
// it even says that it is animate at 2s
//alert($('body').css('animation-duration'));body {
background: linear-gradient(to right, #f00, #0f0, #00f);
background-size: 600% 100%;
-webkit-animation: MoveBG 20s ease infinite;
-moz-animation: MoveBG 20s ease infinite;
-o-animation: MoveBG 20s ease infinite;
animation: MoveBG 20s ease infinite;
}
@-webkit-keyframes MoveBG {
0% {
background-position: 0 0
}
50% {
background-position: 100% 0
}
100% {
background-position: 0 0
}
}
@-moz-keyframes MoveBG {
0% {
background-position: 0 0
}
50% {
background-position: 100% 0
}
100% {
background-position: 0 0
}
}
@-o-keyframes MoveBG {
0% {
background-position: 0 0
}
50% {
background-position: 100% 0
}
100% {
background-position: 0 0
}
}
@keyframes MoveBG {
0% {
background-position: 0 0
}
50% {
background-position: 100% 0
}
100% {
background-position: 0 0
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>Jsfiddle:http://jsfiddle.net/sdobc5vx/2/
有人能看出我做错了什么吗？
这在 Chrome 37 中发生在我身上 - 但看起来它在 Firefox 30 中工作。嗯...
最佳答案
不太确定，但看起来即使您覆盖已经开始的关键帧，帧刷新也不会发生，这可能是一个 chrome 错误。
一个技巧是隐藏元素并(异步地)显示它以进行重绘(但闪烁不太理想)。
$('body').css('animation', animation).hide().show(0);
//^__ Need this to force asyncronous show
var animation = 'MoveBG 2s ease infinite';
$('body').css('animation', animation).hide().show(0);
//^___Asyncronously showbody {
background: linear-gradient(to right, #f00, #0f0, #00f);
background-size: 600% 100%;
-webkit-animation: MoveBG 20s ease infinite;
-moz-animation: MoveBG 20s ease infinite;
-o-animation: MoveBG 20s ease infinite;
animation: MoveBG 20s ease infinite;
}
@-webkit-keyframes MoveBG {
0%{background-position:0 0}
50%{background-position:100% 0}
100%{background-position:0 0}
}
@-moz-keyframes MoveBG {
0%{background-position:0 0}
50%{background-position:100% 0}
100%{background-position:0 0}
}
@-o-keyframes MoveBG {
0%{background-position:0 0}
50%{background-position:100% 0}
100%{background-position:0 0}
}
@keyframes MoveBG {
0%{background-position:0 0}
50%{background-position:100% 0}
100%{background-position:0 0}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
</body>这是另一个有效的 hack。将动画重置为无，然后再次将其设置回来，这确实不会产生闪烁。
var animation = 'MoveBG 2s ease infinite';
var $body = $('body').css('animation', 'none'); //reset it
setTimeout(function(){
$body.css('animation', animation); //set it back
});
您也可以对 addClass 使用相同的 hack。
关于javascript - 无法使用 jQuery 更改主体上的 'animation-duration' CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26132086/