JQuery cycle, thumbnail src rotator on hover with fadeIn

Question

Any chance to add fade In effect with this function, is use function below to rotate thumbs on my site

example http://jsfiddle.net/u6PLS/

   $(document).ready(function(){
     var timer,
      count = 0,
      cycle = function(el){
        var s = el.attr('src'),
         root = s.substring( 0, s.lastIndexOf('/') + 1 );
        count = (count+1)%4;
        el.attr('src', root + ((count==0) ? 'default' : count) + '.jpg');
     };

     $('.img').hover(function(){
       var $this = $(this);
       cycle($this);
       timer = setInterval(function(){ cycle($this); }, 800);
     }, function(){
       clearInterval(timer);
     });

    })

Answer 1

Does this fiddle work?
Fiddle: http://jsfiddle.net/jEqrN/1/
JS:

    $(document).ready(function(){
 var timer,
  count = 0,
  cycle = function(el){
      var s = el.attr('src'),
      root = s.substring( 0, s.lastIndexOf('/') + 1 );
      count = (count+1)%4;
      var url = root + ((count==0) ? 'default' : count) + '.jpg',
          overlay = $('<img src="'+url+'" class="imgoverlay" style="height:'+el.height()+'px;width:'+el.width()+'px;"/>');
      el.before(overlay);
      el.fadeOut(300,function(){
          overlay.remove();
          el.attr('src',url).show();
      });
 };

 $('.img').hover(function(){
   var $this = $(this);
   cycle($this);
   timer = setInterval(function(){ cycle($this); }, 800);
 }, function(){
   clearInterval(timer);
 });

});

CSS:

.imgoverlay{
    position:absolute;
    top:0px;
    left:0px;
}
.img{
    position:relative;
}