使用jQuery hoverFlow或hoverIntent插件動畫淡入/淡出

我試過幾種不同的方式解決這個問題，到目前爲止還沒有發現工作，因爲它應該的解決方案。我想動畫.fadeIn和.fadeOut具備以下條件：使用jQuery hoverFlow或hoverIntent插件動畫淡入/淡出

1）中的文本和圖像（位於跨度內）在鼠標懸停進展到下一個動畫前
2）完全淡入動畫逐漸淡出
3）在鼠標離開，逐漸發展到下一個動畫
5）動畫應該運行平穩，不應該排隊

這裏是我迄今爲止之前淡出文本和圖像
4）完全淡出動畫：

$(document).ready(function() { 

$("a").mouseover(function() { 
$("span.imtx").dequeue().fadeIn(3000, "swing", " "); 
}); 

$("a").mouseleave(function() { 
$("span.imtx").fadeOut(3000, "swing", " "); 
}); 
});

到目前爲止，上面的代碼已經來到最接近我想要的東西，所以我與堅持，如果可能的話，保存任何微小的變化。也就是說，淡入淡出有時會發生，有時不會。它也可以通過無數的鼠標滑鼠和鼠標葉片而感到緊張。我正在使用FF 6.0進行開發，但也需要在所有主流瀏覽器（FF6，IE8，Google Chrome）上運行。我只用了一個月的jQuery/JavaScript，因此請在回答時考慮這一點。這對我來說並不是一種直觀的語言，但我一直在學習。

好吧，現在問題，或者說，請求幫助：我想要合併Ralf Stoltze的hoverFlow插件或Brian Cherne的hoverIntent插件，以幫助淡入淡出和淡出淡出動畫正常執行。我會發布我的嘗試，但迄今沒有任何工作。有人在這裏熟悉這些插件，你能幫我讓他們使用上面的代碼嗎？

來源

2011-08-22 Scott

當你使用fadeIn或者fadeOut時，它本質上改變了display屬性，因此如果它沒有完成一個vs其他的並且你執行了第二個效果，那麼object就不再有適當的屬性了，因此jQuery需要運行這個效果減少時間和/或增加的stop（）的出隊，而不是（），如果你想試試這個http://jsfiddle.net/yAupq/我使用fadeTo如果您的鼠標進入和離開突然，反覆開啓和關閉，不會收支平衡。影響將繼續對當前事件，從去年開始的狀態，而不會增加隊列中的所有次鼠標進入或離開該對象並運行這些影響一個接一個......

來源

2011-08-22 21:23:30 Tumharyyaaden

這是怎麼回事，當我嘗試是第一張圖像淡入。當鼠標滑過時，圖像不會淡出。另外，當我將鼠標懸停在其他鏈接之一上時，圖像會突然切換，而不是第一張圖像淡出，第2張圖像優雅地衰落。 – Scott

以及您需要提供更多的代碼和細節，更具體的CSS如果可能的話，上述編輯的jsfiddle，保存和後期更新的鏈接在這裏，所以我可以看到你所談論的到底是什麼。這裏的圖像更新，http://jsfiddle.net/yAupq/1/它似乎工作得很好，你想要的方式。 – Tumharyyaaden

這是我正在運行的唯一腳本。我的CSS只是定義了位置，字體等等。當鏈接被替換時，圖像和文本顯示完美無瑕，直到我嘗試包括jQuery所做的所有淡出。我想我會使用hoverFlow插件作爲更熟悉jQuery的方式，已經爲我完成了繁重的工作。我想在這一點上喜歡使用已有的東西，而不是重新發明輪子（因爲我現在不擅長輪子製造）。你有任何hoverFlow的經驗，你能幫我把它應用到我現有的代碼嗎？ – Scott

使用jQuery hoverFlow或hoverIntent插件動畫淡入/淡出

回答

相關問題