添加淡入淡出效果jQuery圖像替換懸停腳本

Question

有幾個關於這方面的話題，但他們沒有幫助我的情況。我寫了一個小腳本，以便在盤旋時更改一些社交圖標的圖像源。我試圖添加淡入和淡出效果，所以它不僅僅是一個直接的圖像交換。這是我的腳本：

$(".social_icons").live('hover', function() { 
    if ($(this).attr("class") == "social_icons") { 
    this.src = this.src.replace("-black","-color"); 
    } else { 
    this.src = this.src.replace("-color","-black"); 
    } 
    $(this).toggleClass("on"); 
}); 

我該如何添加fadeIn/fadeOut效果呢？

Answer 1

試試這個

$(".social_icons").live('hover', function() { 
    var $curr = $(this); 
    if ($(this).attr("class") == "social_icons") { 
     $curr.fadeOut('slow', function() { 
      $curr.attr('src', this.src.replace("-black","-color")); 
      $curr.fadeIn('slow'); 
     }); 
    } else { 
     $curr.fadeOut('slow', function() { 
      $curr.attr('src', this.src.replace("-color","-black")); 
      $curr.fadeIn('slow'); 
     }); 
    } 
    $(this).toggleClass("on"); 
});