javascript - 为什么我的 jQuery 转换有问题？

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