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