Как добавить 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/