Question

我有一个带有css叠加层的jQuery过渡，如果用户将鼠标移动一秒或更长时间，它将正常工作....但是如果用户快速移动，则覆盖文本保持不带覆盖背景。这是我的jQuery代码：

$(".cascade-t1").hover(function(){
$(".cascade-corner").fadeOut();
$(".overlay-t1").animate({"left": "-300px"}, 300, function(){
    $(".cascade-overlay-content").fadeIn(200);    
 });


}, function(){

   $(".cascade-corner").fadeIn();
    $(".cascade-overlay-content").fadeOut(200, function(){
    $(".overlay-t1").animate({"left": "130px"}, 300);    
   });

});

这是the script in action

Answer 1

看起来问题是，在完成mouseenter动画之前你没有fadeIn() .overlay-t1文本，而在mouseleave上，你会在动画之前立即fadeOut()显示文本。当您将鼠标移入和移出的速度超过动画的初始时，代码将淡出文本，然后再次淡入（您看到的问题）。

一种可能的解决方案是稍微改变你的底部（mouseleave）功能，使其更接近你的顶部（mouseenter）功能。类似的东西：

 $(".cascade-corner").fadeIn();
 $(".overlay-t1").stop(true, true).animate({"left": "130px"}, 300, function () {
     $(".cascade-overlay-content").fadeOut(200);
 });

.stop（）用于防止动画在有人垃圾邮件时反复播放。

<强> FIDDLE DEMO

Answer 2

不确定jquery animate如何在引擎盖下工作，但它可能是使用javascript来动画而不是css过渡。 css过渡的好处是它在动画开始之前完成所有动画计算并且是硬件加速的。 Javascript受调度程序的支配，处于非常高的水平，所以它总是不稳定。

尝试jquery transit。

http://ricostacruz.com/jquery.transit/

为什么我的jQuery转换是毛病的？

2 个答案: