我在freakyleaf.co.uk/hoverfade/上有以下活動示例,在懸停在一個圖塊上時,圖塊背景圖像在600毫秒(.tile_img)上形成1到0.25不透明度,然後文本從0到1不透明度過濾500ms(.overlay)。在鼠標移出時,會發生相反的情況。jQuery懸停鼠標懸停/鼠標退出計時
只要鼠標一旦鼠標懸停動畫完成,這一切都可以正常工作。如果在鼠標懸停動畫期間鼠標離開,平鋪圖像將淡出爲完全不透明狀態,但文本不會褪色,從而使其可見。
我有以下代碼:
$(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功能,但如此在一些地方已經嘗試過,但只有到目前爲止破碎的代碼。
我甚至不確定我擁有的是實現我想要的最佳方式;我只是偶然的,因爲我是一個完全的新手。
任何幫助將不勝感激。
非常感謝。
我認爲一個解決方案可能涉及'setInterval',但不確定如何實現。我放棄了你的代碼建議,它似乎打破了鼠標事件,即動畫在中途停住了一半,即使當鼠標離開了平鋪時... – 2012-01-15 12:53:25
對不起!我在代碼中犯了一個錯誤。當你做.overlay動畫時,你指的是這個,但我忘記了這將在setInterval的範圍內。通過分配一個變量,比如self,並賦予它這個值,你可以在setInterval中使用它。代碼在我的電腦上運行:) – jonepatr 2012-01-15 17:46:19
感謝您的快速回復...嘗試了新代碼,但仍然遇到問題,如果在鼠標懸停動畫結束之前鼠標離開了tile,則「overlay」div不會褪色('.tile_img'不過)...任何你可以擺脫這一點的燈將非常感激! :) – 2012-01-15 18:48:43