我刚刚在这样的页面上实现了 CSS 动画:
@-webkit-keyframes backdrop-roll{
to { background-position-x:100%; }
}
body
{
background-image:url('http://www.wallmay.net/thumbnails/detail/20120331/pokemon%20fields%20ruby%201920x1200%20wallpaper_www.wallmay.com_2.jpg');
background-size: 800px 650px;
-webkit-animation: backdrop-roll 8s linear infinite;
-webkit-animation-direction:normal
}
有一个按钮可以改变背景,我希望图像保持静止,所以我通过 Jquery 尝试了这个:
$('body').css('-webkit-animation-play-state','paused');
这就是我想到的,但出于某种原因,它反而阻止了一切工作。这对我来说是新的,所以我不确定要查找什么(我找到了如何使用 css 而不是 jquery 事件来停止它)。
最佳答案
我会像这样将动画播放状态属性放入它们自己的类中:
.play{
-webkit-animation-play-state: running;
}
.pause{
-webkit-animation-play-state: paused;
}
然后就可以使用jQuery来控制动画了:
$(document).ready(function(){
$('body').addClass('play');
$('#pause').click(function(){
if($('body').hasClass('play')){
$('body').removeClass('play');
}
});
$('#resume').click(function(){
if(!$('body').hasClass('play')){
$('body').addClass('play');
}
});
});
这是一个例子:http://jsfiddle.net/F2nQM/
关于javascript - 使用 Jquery 停止 css 动画。这样做的正确方法是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23371245/