jQuery 悬停 mouseover/mouseout 计时

Question

我在freakyleaf.co.uk/hoverfade/ 有以下实时示例，当将鼠标悬停在磁贴上时，磁贴背景图像在 600 毫秒 (.tile_img) 内从 1 淡化到 0.25 不透明度，然后在 500 毫秒 (.overlay) 内将文本从 0 淡化到 1 不透明度)。在鼠标移出时，会发生相反的情况。

只要鼠标在鼠标悬停动画完成后离开，这一切都可以正常工作。如果鼠标在鼠标悬停动画期间离开，平铺图像会逐渐变回完全不透明度，但文本不会褪色，而是可见。

我有以下代码：

$(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函数（做同样的事情，但读起来更整洁一些），并抛出了一些dequeue()，虽然这主要是出于习惯。有些人可能会认为这毫无意义，但在某些时候它已成为我的好习惯。

$(".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); 

    });
});