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

Question

我在 freakyleaf.co.uk/hoverfade/ 上有以下实例，将鼠标悬停在图块上时，平铺背景图像在 600 毫秒内从 1 的不透明度渐变到 0.25 (.tile_img)，然后文本在 500 毫秒内从 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); 

    });
});