jQuery悬停鼠标悬停/鼠标退出计时

Question

我在freakyleaf.co.uk/hoverfade/上有以下活动示例，在悬停在一个图块上时，图块背景图像在600毫秒（.tile_img）上形成1到0.25不透明度，然后文本从0到1不透明度过滤500ms（.overlay）。在鼠标移出时，会发生相反的情况。

只要鼠标一旦鼠标悬停动画完成，这一切都可以正常工作。如果在鼠标悬停动画期间鼠标离开，平铺图像将淡出为完全不透明状态，但文本不会褪色，从而使其可见。

我有以下代码：

$(document).ready(function(){ 
$(".tile").hoverIntent(function() { 

$(".tile_img", this).animate({"opacity": "0.25"}, 600, 
function() { $(this).next(".overlay").animate({"opacity": "1"}, 500); } 
    ); 
}, 
function() { 
$(".overlay", this).animate({"opacity": "0"}, 500, 
function() { $(this).prev(".tile_img").animate({"opacity": "1"}, 600); } 
    ); 
}); 
}); 

和HTML：

<div class="wrapper"> 
    <ul id="service_boxes"> 
    <li id="sb_recording" class="tile" onClick="location.href='recording.php';" style="cursor: pointer;"> 
     <h2><a href="recording.php">Recording</a></h2> 
     <div class="tile_img"></div> 
     <div class="overlay"><p>Vintage analogue warmth and cutting-edge digital technology working in perfect harmony - That's the SoundARC sound!</p></div> 
    </li> 
    </ul> 
</div> 

我明白，我也许应该使用.stop功能，但如此在一些地方已经尝试过，但只有到目前为止破碎的代码。

我甚至不确定我拥有的是实现我想要的最佳方式;我只是偶然的，因为我是一个完全的新手。

任何帮助将不胜感激。

非常感谢。

Answer 1

您还可以通过使用setInterval的检查，如果动画仍然在，当它完成火新的动画..

$(document).ready(function(){ 
    $(".tile").hoverIntent(function() { 
    $(".tile_img", this).animate({"opacity": "0.25"}, 600, function() { 
     $(this).next(".overlay").animate({"opacity": "1"}, 500); 
    }); 
    }, function() { 
    var self = this; 
    var inter = setInterval(function(){ 
     if(!$(".overlay", self).is(':animated') && !$(".overlay", self).prev(".tile_img").is(':animated')){ 
     clearInterval(inter); 
     $(".overlay", self).animate({"opacity": "0"}, 500, function() { 
      $(this).prev(".tile_img").animate({"opacity": "1"}, 600); 
     }); 
     } 
    },100); 
    }); 
}); 

Answer 2

通过使用stop方法停止动画并传递对应于clearQueue和jumpToEmd的2个参数（false，true）来尝试此操作。

$(document).ready(function(){ 
$(".tile").hoverIntent(function() { 

$(".tile_img", this).stop(false, true).animate({"opacity": "0.25"}, 600, 
function() { $(this).next(".overlay").animate({"opacity": "1"}, 500); } 
    ); 
}, 
function() { 
$(".overlay", this).stop(false, true).animate({"opacity": "0"}, 500, 
function() { $(this).prev(".tile_img").animate({"opacity": "1"}, 600); } 
    ); 
}); 
}); 

Answer 3

我能看到的主要问题是解决问题运行动画后半部分的回调意味着，如果您试图实现和.stop（）功能，则只有在动画完成后才能运行。这是我相信是什么导致问题，我下面有什么似乎工作;虽然它仍然有一些粗糙的边缘问题已经消失。

我甩掉了hoverIntent的用法，因为我没有看到它的必要性，如果我错过了这一点，我很抱歉。我也发现悬停有点不可靠，所以我更喜欢不同的状态。我还将动画换成了fadeTo函数（做同样的事，但读起来有点整齐），并抛出了一些出列（），虽然这大部分都是习惯性的。有些人可能会认为这是毫无意义的，但在某些时候，对我来说，这是一种很好的做法。

$(".tile").mouseenter(function() { 

    $(".overlay", this).stop(false,true) 
    $(".tile_img", this).dequeue().fadeTo(600, 0.25,function(){ 

     $(this).parent().find(".overlay").dequeue().fadeTo(500,1); 

    }) 

}); 

$(".tile").mouseleave(function(){ 

    $(".tile_img", this).stop(false,true) 
    $(".overlay", this).dequeue().fadeTo(500,0,function() { 

     $(this).parent().find(".tile_img").dequeue().fadeTo(500,1); 

    }); 
});