jquery - JQuery循环，缩略图src旋转器悬停与淡入

Question

任何添加淡入淡出的机会使用此功能，使用下面的功能在我的网站上旋转拇指

示例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

这个小提琴有用吗？
小提琴： 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;
}