CODEWITHSUNDEEP
javascriptjquerycssgoogle-chromejquery-animate
Shamrockonov
Shamrockonov

Reputation: 489

JQuery animate firing late in Chrome

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

Upvotes: 1

Views: 132

Answers (1)

Ankit Tyagi
Ankit Tyagi

Reputation: 2375

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

Upvotes: 1

Related Questions