jQuery懸停圖像更改動畫

Question

我有一個帶有灰度圖像的IMG標籤。我掛鉤了一個Hover（）事件，以便將「src」更改爲懸停時的彩色圖像，並在鼠標懸停時恢復爲灰度。

這工作得很好，但變化是突然的。我想爲該效果添加一個淡淡的淡入淡出（fadeIn（）），以便顏色看起來淡入淡出。我寫了以下我認爲會工作，但沒有。 （圖像改變，但沒有淡化或延遲效果）。我究竟做錯了什麼？

  $("#showForm").hover(
       function() { 
       $(this).fadeIn('slow', function(){ 
        $(this).attr("src", 'images/AddButtonSmall.gif'); 
       }); 
       }, 
       function() { 
       $(this).fadeIn('slow', function(){ 
        $(this).attr("src", 'images/AddButtonSmallGray.gif'); 
       }); 
       } 
      ); 

Answer 1

這裏有幾個解決方案。您的代碼無法正常工作，因爲您正在設置立即更改圖像的來源。只需加載兩個圖像，使用CSS覆蓋它們，然後在父容器被隱藏時淡入淡出。另外，您可以交叉淡入鼠標懸停

http://jsfiddle.net/Xm2Be/3/

$('.fader').hover(function() { 
    $(this).find("img:last").fadeToggle(); 
});​ 

交叉時尚它們

CSS

.fader { display: inline-block; } 
.fader img:last-child { 
    position: absolute; 
    top: 0; 
    left: 0; 
    display: none; 
}​ 

HTML

<div class="fader"> 
    <img src="http://placehold.it/300x300/000fff" /> 
    <img src="http://placehold.it/300x300/fff000" /> 
</div>​ 

褪色Ë

http://jsfiddle.net/Xm2Be/2/

$('.fader').hover(function() { 
    $(this).find("img").fadeToggle(); 
});​ 

Answer 2

$(this).fadeIn('slow', 

實際上是試圖在這個元素褪色，慢慢地，和「本」指的是

$("#showForm") 

相反，如果你願意，你可以直接把彩色圖像在當前灰度圖像，並標記隱藏的彩色圖像，然後讓它慢慢淡入。假設它們位於彼此之上，則可以這樣做：

$("#showForm").hover(
    function() { 
     $("#colorImageID").fadeIn(); 
    }, 
    function() { 
     $("#colorImageID").fadeOut(); 
    }); 
    } 

）;

假設HTML是一樣的東西（其中sameAbsolutePosition是CSS把它們放在同一個確切的地點，所以也許是這樣的位置是：絕對的;左：20;頂部：20像素）：

<img src='images/AddButtonSmallGray.gif' class="sameAbsolutePosition"> 
<img src='images/AddButtonSmall.gif' style="display:none;" class="sameAbsolutePosition"> 

要重申，你會在另一幅圖像上淡出一幅新的圖像。您也可以同時淡出灰度圖像。

Answer 3

你在哪裏淡出？ 淡入確實display:block與不透明改變從0到100 淡出確實display:none不透明度改變從100到0

一次，你淡入，圖像是display:block和不透明度爲100。所以，你不看動畫。 因此，無論是在淡入淡出之前都進行display：none或fadeOut。

給出瞭解釋事物的例子。您應該根據您的要求進行更改。

$("#showForm").hover(
       function() { 
       $(this).fadeOut('fast').fadeIn('slow', function(){ 
        $(this).attr("src", 'images/AddButtonSmall.gif'); 
       }); 
       }, 
       function() { 
       $(this).fadeOut('fast').fadeIn('slow', function(){ 
        $(this).attr("src", 'images/AddButtonSmallGray.gif'); 
       }); 
       } 
      ); 

Answer 4

更好的解決方案：

忘掉JavaScript來做好這項工作。改爲使用CSS的sprites。如果你堅持要淡入淡出，使用轉場。

UPDATE：迴應下面的評論，我不能寫一些代碼，因爲我無法預測Todd's sprite中的維度和位置。我也想澄清一下，我的建議是使用精靈，然後過渡來增強「功能」，而不僅僅是過渡，因爲我認爲他需要在IE8和IE9中工作。

Answer 5

嘗試用這種

$("#showForm").hover(
      function() { 
       $(this).fadeOut('fast',function(){ 
       $(this).attr("src", 'images/AddButtonSmall.gif'); 
       $("#img_src").html("images/AddButtonSmall.gif"); 
       }); 
      $(this).fadeIn('fast'); 
      }, 
      function() { 
      $(this).fadeOut('fast',function(){ 
       $(this).attr("src", 'images/AddButtonSmallGray.gif'); 
       $("#img_src").html("images/AddButtonSmallGray.gif"); 
       }); 
      $(this).fadeIn('fast'); 
      } 
     );​ 

這裏的Fiddle

Answer 6

你能做到這一點的淡入淡出使用過渡太CSS3。 不適用於所有的瀏覽器，但仍... http://www.w3schools.com/css3/css3_transitions.asp

以類似的方式CSS: image link, change on hover

例如：

#showForm 
{ 
    background: transparent url('images/AddButtonSmallGray.gif') center top no-repeat; 

    -webkit-transition:all 0.3s ease-in-out; 
    -moz-transition:all 0.3s ease-in-out; 
    transition:all 0.3s ease-in-out; 
} 

#showForm:hover { 
    background-image: url('images/AddButtonSmall.gif'); 
}