透明PNG圖像交換與淡入淡出jquery

Question

我有一個導航欄與圖像需要翻轉，但他們是tranparent PNG。背景紋理如此透明PNG是必須的。我這樣做：

 $('.fade').each(function() { 
     var std = $(this).attr("src"); 
     var hover = std.replace(".png", "_over.png"); 
     $(this).wrap('<div />').clone().insertAfter(this).attr('src', hover).removeClass('fadein').siblings().css({ 
      position:'absolute' 
     }); 
     $(this).mouseenter(function() { 
      $(this).stop().fadeTo(600, 0); 
     }).mouseleave(function() { 
      $(this).stop().fadeTo(600, 1); 
     }); 
    }); 

其中被張貼在這裏的解決方案： A better implementation of a fading image swap with javascript/jQuery

它的工作原理，但麻煩的是「褪色爲」 PNG（這只是一個陰影）可以在看到頁面加載，因爲它應該在主圖像後面： http://jsfiddle.net/qykwV/

我可以隱藏'_over.png'圖像，而不是將它放在第一個後面嗎？

Answer 1

好吧，我得到了這個工作 - 因爲圖像是透明的，我只是把'上'的圖像放在上面，然後把它隱藏起來。我通過簡單地將html src屬性更改爲覆蓋圖像並使腳本創建如下的非'over'圖像來實現此目的：

 $('.fade').each(function() { 
     var std = $(this).attr("src"); 
     var hover = std.replace("_over.png", ".png"); 
     $(this).wrap('<div />').clone().insertAfter(this).attr('src', hover).removeClass('fadein').siblings().css({ 
      position: 'absolute', 
      opacity: '0' 
     }); 
     $(this).mouseenter(function() { 
      $(this).stop().fadeTo(600, 1); 
     }).mouseleave(function() { 

      $(this).stop().fadeTo(600, 0); 
     }); 
    });