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); 

    }); 
});