javascript - 使用 jQuery Animate 分步动画图像 Sprite ？

Question

我正在尝试使用 jQuery 编写图像 Sprite 代码，想知道是否可以逐步而不是线性地制作动画。基本上，我尝试使用 CSS3 动画，但 IE9 是必需的，我无法让 CSS3 动画在 IE 中正常运行。

我有一个有 12 帧的 Sprite ，每帧为 280px X 280px。我想使用 jQuery 在 mouseover 和 mouseout 上逐步设置 sprite 动画，而不是以线性方式滑动背景图像。

这是我当前的代码:

<div class="window"></div>

CSS:

.window {
    width: 280px;
    height: 280px;
    background: url("http://s27.postimg.org/neu6mvztf/single_hung_door.png");
}

JS:

$(".window").hover(
    function () {
        $(this).animate({
            'background-position-x': '0',
            'background-position-y': '-3080px'
        }, 1500, 'linear');
    },
    function () {
        $(this).animate({
            'background-position-x': '0',
            'background-position-y': '0'
        }, 1500, 'linear');
    }
);

JSFiddle with sample of desired effect

这样可以实现吗？谢谢!

Answer 1

您可以使用名为 velocity.js 的库执行此操作您可以在此处查看如何执行此操作:http://css-tricks.com/clever-uses-step-easing/