0

我正在寻找一种使用 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 这样的插件，但它们适用于精灵，我需要更改元素的图像背景。
使用 Javascript 的 set-interval 函数似乎是一个糟糕的解决方案，因为当用户将鼠标移出元素时，我找不到停止动画的方法。

4

2 回答 2

3

使用类似...

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（带有背景颜色）。

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

于 2013-09-04T07:29:54.337 回答
1

您可以使用jQuery-Keyframes 之类的库 在运行时生成新的关键帧，如果这是您所追求的。

于 2013-09-04T07:32:00.247 回答