Question

我在freakyleaf.co.uk/hoverfade/处有以下实际示例，在将鼠标悬停在图块上时，图块背景图像在600毫秒（.tile_img）上淡化形成1到0.25不透明度，然后文本在500毫秒内从0变为1不透明度（。覆盖）。在mouseout上，反过来发生。

只要鼠标悬停仅在鼠标悬停动画完成后离开，这一切都可以正常工作。如果鼠标在鼠标悬停动画期间离开，则平铺图像会淡化回完全不透明度，但文本不会淡化，使其可见。

我有以下代码：

$(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

尝试使用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 2

你也可以通过使用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 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); 

    });
});

jQuery悬停鼠标悬停/鼠标时间

3 个答案: