jQuery Animation - Infinite motion
===

I was just playing around [jQuery animate()][1]. I tried to make an infinte scrolling background of sorts ([fiddle here][2]). But for the life of me I can't figure out a smooth transition. Code posted here - 

**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;
    $('.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)
    });


What I'm going for - 1st div moves out - fades to nothing - halfway through fadeout - next div fades in and starts the cycle again. Any ideas where I'm going wrong?

  [1]: http://api.jquery.com/animate/
  [2]: http://jsfiddle.net/S4q8b/3/