javascript - 使用 jquery 动画背景图像

Question

我在为背景设置动画以给人一种窗口正在打开的印象时遇到了 View 问题，我的动画实际上是动画的，但它只是像图像按顺序一样动画。我想要的是给人一种电影或动画 gif 的印象。

你可以在这里看到我目前的尝试，

http://jsfiddle.net/8nj4934w/

到目前为止，我已经完成了以下 javascript，

    $('a').bind('mouseenter', function() {
    var self = $(this);
    this.iid = setInterval(function() {
       self.animate({ 'background-position-y': '-=500px' });           
    }, 300);
}).bind('mouseleave', function(){
    this.iid && clearInterval(this.iid);
});

以及我想要的那种效果，

http://www.jeld-wen.com/catalog/exterior-doors

只需将鼠标悬停在门图像上即可。

Answer 1

更新(用于处理双向滑动的 jQuery 解决方案)

function slide(that, increment, limit){
    var self = $(that);
    that.iid && clearInterval( that.iid );

    that.pos = that.pos || 0;
    return setInterval(function () {
        that.pos = that.pos += increment;

        if (that.pos === limit){
            clearInterval(that.iid);
        } else {
            self.css({
                'background-position': '0 '+ that.pos + 'px'
            });
        }
    }, 50);
}

$('a').bind('mouseenter', function () {
    this.iid = slide( this, -500, -11500 );
}).bind('mouseleave', function () {
    this.iid = slide(this, 500, 0);
});

演示在 http://jsfiddle.net/g8cypadx/

---

原始答案我建议您使用带有步骤的 CSS 过渡。

a {
  background-image: url('https://dl.dropboxusercontent.com/u/58586640/9100_FRONT_STRIP.png');
  background-repeat: no-repeat;
  height: 500px;
  width: 500px;
  display: block;
  background-position: 0 0;
  transition: background-position 1s steps(23);
}
a:hover {
  background-position: 0 -11500px; /* number of steps times the height */
}

<a href=""></a>

---

如果你必须通过 jQuery 来做，那么你应该为这两个属性设置动画，但是动画的持续时间为 0，间隔的延迟很小

$('a').bind('mouseenter', function () {
    var self = $(this);
    this.iid = setInterval(function () {
        self.animate({
            'background-position': '-=0 -=500px'
        }, 0);
    }, 50);
}).bind('mouseleave', function () {
    this.iid && clearInterval(this.iid);
});

演示在 http://jsfiddle.net/8nj4934w/2/
(这个解决方案的问题是它不会在最后停止)