1

I have an image sprite which, on mouseenter, changes the background position and moves text over. On mouse leave, the background position and text both move to the left to display the original image. The text is a seperate element which comes from the right to sit over the image once the position has changed.
The mouseenter part works perfectly, with the image and text both scrolling to the left at the same time, but on mouseleave, however in chrome (and what appears to be only chrome), the text will move first, then the image will follow later, the image animation is firing much later than the text. I've read a few issues with .animate() in chrome, but none of the issues seem to be related to this.
Is there anything obviously wrong with this? Or is there simply a better way of doing it

 //animation on mouse enter
$("#featuredImage").mouseenter(function(){
    $(this).animate({ backgroundPositionX:"100%" });
    $("#featuredText").show("slide", { direction: "right" });
});      

 //animation on mouse leave
$("#featuredImage").mouseleave(function(){
    $(this).animate({ backgroundPositionX:"0%" });
    $("#featuredText").hide("slide", { direction: "right" }); 
});
Tibos
  • 27,507
  • 4
  • 50
  • 64
Shamrockonov
  • 489
  • 2
  • 7
  • 19

1 Answers1

1

Try hover see If this helps :

$("#featuredImage").hover(function(){
         $(this).animate({ backgroundPositionX:"100%"});
         $("#featuredText").show("slide" ,{ direction: "right"});
     },function(){
        $(this).animate({ backgroundPositionX:"0%" });
        $("#featuredText").hide("slide",{ direction: "right" }); 
     }
);
Ankit Tyagi
  • 2,381
  • 10
  • 19
  • Thank you for the quick reply, where as it was failing 9/10 with mouseleave, with the use of hover its now failing 3/10, so its definitely a step in the right direction. Any reason as to why this would only be firing late for the background image in chrome? – Shamrockonov Nov 13 '13 at 12:26
  • good to know it helps. Do +upvote. For animation in chrome see if this helps : http://stackoverflow.com/questions/8870999/slow-javascript-animation-in-chrome – Ankit Tyagi Nov 13 '13 at 12:35