Question

无法弄清楚为什么会发生这种情况。

var thumb_width = 240;
var thumb_height = 180;
$('.video-thumbnail').on({
        'mouseenter': function(){
            var i = 0; var j = 0;
            $(this).id = setInterval(function(){
                $(this).animate({
                    'background-position-x': -(j * thumb_width),
                    'background-position-y': -(i * thumb_height)
                });
                i++; j++;
            }, 1000);
        }
    })
});

Answer 1

因为setInterval在Window上下文中运行。为了修复它，您应该明确提供适当的对象上下文。你有几个选择：

使用$.proxy：

$('.video-thumbnail').on({
    'mouseenter': function() {
        var i = 0; var j = 0;
        $(this).id = setInterval($.proxy(function() {
            $(this).animate({
                'background-position-x': -(j * thumb_width),
                'background-position-y': -(i * thumb_height)
            });
            i++; j++;
        }, this), 1000);
    }
});

或使用this的参考：

$('.video-thumbnail').on({
    'mouseenter': function() {
        var i = 0; var j = 0, self = this;
        $(this).id = setInterval(function() {
            $(self).animate({
                'background-position-x': -(j * thumb_width),
                'background-position-y': -(i * thumb_height)
            });
            i++; j++;
        }, 1000);
    }
});

Answer 2

您在setInterval的回调中假设错误的上下文，因为setInterval绑定到全局对象（window）。

此外，background-position-x和background-position-y不是任何CSS规范的一部分，您无法将它们分开（请参阅that answer）。

试试这个：

...
var $this = $(this);
$this.id = setInterval(function() {
  var xPos = -(j * thumb_width);
  var yPos = -(i * thumb_height);
  $this.animate('background-position', xPos + 'px ' + yPos + 'px');
  ++i;
  ++j;
}, 1000);
...

无法使用'in'运算符在undefined中搜索'backgroundPositionX'

2 个答案: