JQuery 动画在 Chrome 中触发较晚

Question

我有一个图像精灵，它在 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" }); 
});

Answer 1

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

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