jQuery 悬停 mouseover/mouseout 计时

Posted 2023-05-08

【中文标题】jQuery 悬停 mouseover/mouseout 计时

【英文标题】：jQuery hover mouseover/mouseout timing

【发布时间】：2012-02-10 13:57:48

【问题描述】：

我在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 函数，但我在几个地方尝试过，但到目前为止只破坏了代码。

我什至不确定我所拥有的是否是实现我想要的最佳方式；由于我是一个完全的新手，我只是偶然地走到了这一步。

任何帮助将不胜感激。

非常感谢。

【参考方案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);
  );
);

【讨论】：

我认为解决方案很可能涉及setInterval，但不确定如何实施。我放弃了您的代码建议，它似乎破坏了 mouseout 事件，即动画进行到一半然后卡住了，即使鼠标离开了瓷砖......

对不起！我在我的代码中犯了一个错误。在做 .overlay 动画时，您指的是这个，但我忘记了这将在 setInterval 的范围内。通过分配一个变量，比如 self 并给它 this 的值，你可以在 setInterval 中使用它。该代码适用于我的计算机：)

感谢您的快速回复...尝试了新代码，但仍然遇到问题，如果鼠标在鼠标悬停动画完成之前离开磁贴，overlay div 不会褪色（ .tile_img 确实如此）......您可以对此有所了解的任何信息将不胜感激！ :)

尝试使用 if(!$(".overlay", self).is(':animated') && !$(".overlay", self).prev(".tile_img")。 is(':animated') ) 作为 setInterval 中的 if 函数

谢谢... 现在就像一个魅力！ :)

【参考方案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); 
    );
);
);

【讨论】：

我试过这个，因为它看起来合乎逻辑，但不幸的是没有改变行为。不管怎么说，还是要谢谢你！ :)

【参考方案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); 

    );
);

【讨论】：

谢谢伙计！ :) 这确实工作得很好......唯一的障碍是mouseleave 函数本质上现在会触发一个新动画，所以可能会有一点抖动......