如何將jQuery fadeIn和fadeOut添加到鼠標事件功能？

Question

我正在使用jQuery更改鼠標事件（懸停）上的圖像，但我無法找出添加fadeIn和fadeOut以觸發以下功能的最佳方式。

 var sourceIn = function() { 
      var $this = $(this); 
      var newSource = $this.data('alt-src'); 
      $this.data('alt-src', $this.attr('src')); 
      $this.attr('src', newSource); 
     } 
     var sourceOut = function() { 
      var $this = $(this); 
      var newSource = $this.data('alt-src'); 
      $this.data('alt-src', $this.attr('src')); 
      $this.attr('src', newSource); 
     } 

     $(function() { 
      $('img.toggle').mouseenter(sourceIn); 
      $('img.toggle').mouseleave(sourceOut); 
     }); 

我已經嘗試了許多方法來追加fadeToggle上面，我不知道最好的方法是什麼。

的jsfiddle例如：http://jsfiddle.net/hn5w7/

Answer 1

而不是僅僅改變src，從fadeOut使用回調和fadeIn

$this.fadeOut(function() { 
    $this.attr('src', newSource).fadeIn(); 
}); 

演示：http://jsfiddle.net/hn5w7/1/