CODEWITHSUNDEEP
jqueryrotationthumbnailsfadein
Milan Milosevic
Milan Milosevic

Reputation: 433

JQuery cycle, thumbnail src rotator on hover with fadeIn

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);
     });

    })

Upvotes: 0

Views: 783

Answers (1)

Kevin Pei
Kevin Pei

Reputation: 5872

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;
}

Upvotes: 3

Related Questions