Question

I have this code.

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

That makes mousetail follow the cursor. But when i bring mouse over the box (away from the mousetail), the mousetail will instantly appear at that position. I want it to reach there with animation.
Also, background-position-x doesn’t seem to work in Firefox. can someone please tell me the correct way to use background-position:0px *based on co-ord* in the code (i don’t know the correct syntax)

Answer 1

The syntax is very similar, it takes one CSS argument, then a duration argument, then a callback (what to execute when the animation is complete)

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