Question

我有一个视图问题，动画背景给人的印象是窗口正在打开，我让动画实际上是动画，但它只是动画像图像是按顺序。我想要的是给人一种电影或GIF动画的印象。

您可以在此处查看我当前的尝试，

我到目前为止已完成以下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/的演示（此解决方案的问题在于它不会在最后停止）

用jquery动画背景图像

1 个答案: