Question

我有一个图像精灵，它在mouseenter上改变背景位置并移动文本。在鼠标离开时，背景位置和文本都向左移动以显示原始图像。文本是一个单独的元素，它来自于位置变化后坐在图像上的权利鼠标中心部分工作正常，图像和文本同时向左滚动，但在鼠标上，但是在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" }); 
     }
);

JQuery在Chrome后期制作动画

1 个答案: