jQuery圖像交叉淡化onhover

所以我一直在尋找一個插件或jQuery代碼放入我正在工作的網站上，可以輕鬆實現圖像切換。我發現這個真棒小工具：http://www.designchemical.com/blog/index.php/jquery/quick-and-easy-jquery-image-swap/ ...正是我所需要的，除了它切換圖像，但不交叉淡入淡出。我知道我可以創建一個圖像，我可以改變背景以淡入圖像（即CSS精靈），但還沒有找到像上面的鏈接那樣簡單的插件，我只需將它放在我的所有按鈕上的課程中在圖像末尾默認爲「_off.jpg」，然後讓jQuery將「_off.jpg」更改爲「_on.jpg」。不幸的是，我正在處理的這個網站有很多按鈕，並且必須精心地創建一個背景變化的懸停情況，這將非常耗時。jQuery圖像交叉淡化onhover

任何人都對jQuery和/或插件有任何建議，他們發現他們只是他們的生活？

謝謝！

來源

2011-04-28 flinx777

所以，你想了jQuery找出所有圖像具有一定的「關閉」 propertyand它交叉衰減到圖像「開」？ – 2011-04-28 22:31:31

如果您只想快速淡入淡出效果，則可以爲不透明度設置動畫。犯規給你一個交叉淡入淡出，雖然

$(".img-swap").hover(
    function(){ 
     this.src = this.src.replace("_off","_on"); 
     $(this).css({opacity: 0}).animate({opacity: 1},{ queue: false, duration: 'slow' }); 
    }, 
    function(){ 
     this.src = this.src.replace("_on","_off"); 
     $(this).css({opacity: 0}).animate({opacity: 1},{ queue: false, duration: 'slow' }); 
});

觀看演示 - http://www.designchemical.com/lab/jquery/demo/jquery_demo_image_swap_fade.htm

來源

2011-04-29 00:10:00 Lee

thnx用於發佈，它幾乎看起來像是功能有點煩人，它就像圖像試圖加載懸停圖像，而不是交叉淡入淡出，我知道我會找到它的地方:) – flinx777 2011-04-29 00:22:47

這很不錯。唯一的事情就是通過CSS包含盤旋或預加載另一種方式。儘管如此，我喜歡這個劇本。 – TheBlackBenzKid 2012-05-25 08:40:51

我會建議沿着@Lee線的東西 - 但它不會是一個淡入淡出，而是淡入淡出。

雖然這並沒有解決您對「簡單」插入解決方案的需求，但一種方法是將圖像放在另一個具有懸停圖像的元素中。然後，淡入/淡出「關閉」圖像將變得很簡單，從而揭示圖像背景。

解決此問題的一種方法（必須自動設置這些背景樣式）將使用JQuery遍歷所有具有特定類的圖像，然後將其容器的背景圖像設置爲相應的src（具有類似如您有以上與「_ON」取代「_off」代碼。

希望有所幫助。

來源

2011-04-29 00:48:21

jQuery圖像交叉淡化onhover

回答

相關問題