Question

我正在寻找一种使用jQuery模拟CSS @keyframes动画的方法。

当用户将鼠标移动到元素上时，我需要在每个 x 秒后更改背景图像。> CSS动画应该是：

.readon:hover {
    animation: readonin 2s;
}

@keyframes readonin {
     0% { background-image: url(1.png); }
    50% { background-image: url(2.png); }
   100% { background-image: url(3.png); }
}

我发现像Spritely这样的插件，但是它们与sprite一起工作，我需要改变元素的图像背景。
使用Javascript的set-interval函数似乎是一个糟糕的解决方案，因为当用户将鼠标移出元素时，我无法找到停止动画的方法。

Answer 1

使用像...这样的东西。

var images = ["1.png", "2.png", "3.png"];
var $element = $(".readon");
var interval = null;
$element.hover(function () {
    var $this = $(this);
    var i = 0;
    var fn = function () {
        $this.css("background-image", "url(" + images[i] + ")");
        i = ++i % images.length;
    };
    interval = setInterval(fn, 666);
    fn();
},
function () {
    clearInterval(interval);
    $(this).css("background-image", "none");
});

jsFiddle类似的概念（背景颜色）。

应该清楚地看到发生了什么。基本上我们开始循环遍历图像并将它们设置为鼠标悬停的背景图像，并在鼠标离开时重置它。

Answer 2

您可以使用jQuery-Keyframes等库如果你正在追求的话，那就在运行时生成新的关键帧。

相当于jQuery的@keyframes

2 个答案: