jquery - 用 .animate() 替换这个 jquery .css() 函数

Question

我有这个代码。

jQuery("#box").bind('mousemove', function(e){
       jQuery(".mousetail").css('background-position-x', (e.pageX - this.offsetTop - 437)+'px');
});

这使mousetail跟随光标。但是当我把鼠标放在盒子上（远离鼠尾）时，鼠尾会立即出现在那个位置。我希望它通过动画到达那里。此外， background-position-x 似乎在 Firefox 中不起作用。有人可以告诉我background-position:0px *based on co-ord*在代码中使用的正确方法（我不知道正确的语法）

Answer 1

语法非常相似，它接受一个CSS参数，然后是一个持续时间参数，然后是一个回调（动画完成时执行什么）

jQuery(".mousetail").animate({
  'background-position-x' : (e.pageX - this.offsetTop - 437)+'px' //Use Colon instead of comma
  }, 300, //This number sets the duration of the animation
  function() {alert('animation complete!');} //Callback function
); 

Answer 2

你试过这个吗？

jQuery("#box").bind('mousemove', function(e){
   jQuery(".mousetail").animate({'background-position-x': (e.pageX - this.offsetTop - 437)+'px'});
});