jQuery Animation - Mouvement infini

Question

Je jouais juste autour de jQuery animate(). J'ai essayé de faire un fond de défilement infinie de sortes (fiddle here). Mais pour la vie de moi, je ne peux pas imaginer une transition en douceur. Code affiché ici -

HTML

<div class='bg r hide'></div> 
<div class='bg g hide'></div> 
<div class='bg y hide'></div> 
<div class='bg b hide'></div> 

JavaScript

var backgroundTimeout = 1700; 

function animateMotion(){ 
    $('.bg').each(function(i, item) { 
     var self = $(this); 
     setTimeout(function() { 
      self.css('opacity', '0.5').removeClass('hide') 
       .animate({opacity: 1, marginLeft: '+=6'}, backgroundTimeout/3) 
       .animate({ 
        marginLeft: '+=30', 
        opacity: 0, 
        queue: false, 
       }, backgroundTimeout + 400, 'linear', function() { 
        self.css('marginLeft', 0); 
        self.css('opacity', 1); 
        self.addClass('hide'); 
       }) 
       if (self.index() === $('.bg').length - 1) { 
        setTimeout(animateMotion, backgroundTimeout); 
       } 
     }, backgroundTimeout * i + 1) 
    }); 
} 

Ce que je vais faire - 1ère div sort - se fane à rien - à mi-chemin fadeout - suivant div se fane et recommence le cycle. Des idées où je vais mal?

Answer 1

Je ne sais pas si c'est là que vous visez, mais un coup d'oeil:

(function loop(idx) { 
    var 
    $elements = $('#wrapper div'), 
    idx = idx % $elements.length; 

    $elements.eq(idx).css({ 
    opacity: 0, 
    left: 0 
    }).removeClass('hide').show().animate({ 
    opacity: 1, 
    left: 30 
    }, { 
    duration: 1000, 
    easing: 'linear', 
    complete: function() { 
     $(this).animate({ 
     opacity: 0, 
     left: 60 
     }, { 
     duration: 1000, 
     easing: 'linear', 
     complete: function() { 
      $(this).addClass('hide'); 
     } 
     }); 

     loop(idx + 1); 
    } 
    }); 
}(0)); 

avec:

<div id="wrapper"> 
    <div class='bg r hide'></div> 
    <div class='bg g hide'></div> 
    <div class='bg y hide'></div> 
    <div class='bg b hide'></div> 
</div> 

Démo: http://jsfiddle.net/hbh7z/1/