Javascript JQuery动画在Chrome中后期启动

我有一个图像精灵，它在mouseenter上改变背景位置并移动文本。鼠标左键时，背景位置和文本都向左移动以显示原始图像。文本是一个单独的元素，一旦位置发生变化，文本从右侧进入图像上方。
mouseenter部分工作完美，图像和文本同时向左滚动，但在mouseleave上，但是在chrome（看起来只有chrome）中，文本将先移动，然后图像将随后移动，图像动画的触发时间远晚于文本。 我已经阅读了一些关于chrome中.animate（）的问题，但似乎没有一个问题与此相关。
这有什么明显的问题吗？还是有更好的方法

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

---

尝试悬停，看看这是否有帮助：

$("#featuredImage").hover(function(){
         $(this).animate({ backgroundPositionX:"100%"});
         $("#featuredText").show("slide" ,{ direction: "right"});
     },function(){
        $(this).animate({ backgroundPositionX:"0%" });
        $("#featuredText").hide("slide",{ direction: "right" }); 
     }
);

---

尝试悬停，看看这是否有帮助：

$("#featuredImage").hover(function(){
         $(this).animate({ backgroundPositionX:"100%"});
         $("#featuredText").show("slide" ,{ direction: "right"});
     },function(){
        $(this).animate({ backgroundPositionX:"0%" });
        $("#featuredText").hide("slide",{ direction: "right" }); 
     }
);

---

感谢您的快速回复，mouseleave在9/10时失败，而hover在3/10时失败，所以这绝对是朝着正确方向迈出的一步。有什么原因可以解释为什么chrome中的背景图像只能延迟启动？很高兴知道这会有所帮助。不要投票。对于chrome中的动画，请看这是否有帮助：感谢您的快速回复，mouseleave在9/10时失败，而hover的使用现在失败了3/10，因此这绝对是朝着正确方向迈出的一步。有什么原因可以解释为什么chrome中的背景图像只能延迟启动？很高兴知道这会有所帮助。不要投票。有关chrome中的动画，请参见以下内容：