無法使用'in'運算符在undefined中搜索'backgroundPositionX'

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的回調錯誤的背景下，作爲setInterval綁定到全局對象（window）。

另外background-position-x和background-position-y不是任何CSS規範的一部分，你不能將它們分開（詳見that answer）。在Window方面

... 
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); 
... 

Answer 2

因爲setInterval運行：

試試這個。爲了解決它，你應該明確提供適當的對象上下文。你有兩個選擇：

使用$.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); 
    } 
});