JQuery 动画在 Chrome 中触发较晚

Posted 2023-05-08

【中文标题】JQuery 动画在 Chrome 中触发较晚

【英文标题】：JQuery animate firing late in Chrome

【发布时间】：2013-11-26 00:53:06

【问题描述】：

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

【参考方案1】：

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

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

【讨论】：

感谢您的快速回复，因为鼠标离开 9/10 失败，使用悬停现在失败 3/10，所以它绝对是朝着正确方向迈出的一步。有什么理由说明为什么这只会为 chrome 中的背景图像延迟触发？

很高兴知道它有帮助。做+upvote。对于 chrome 中的动画，看看这是否有帮助：***.com/questions/8870999/…