Annoying Bug in banner cycle

Question

I have created a rotating banner script for a new site I'm developing View banner here(it rotates every 10 seconds)

Unfortunately to the transition seems to be a biut buggy, and the image will fade out, show the same image again and then fade in the new one. I think I have made a simple error somewhere, but can't figure out where it is. the code used to cycle the banners is:

In document ready:

if ($('.home').length > 0){
        $('<img width="100%" />').attr('src', '/assets/img/backgrounds/home/hero'+homecount+'.jpg').load(function(){
                $('.hero').append( $(this) );
                $('.hero img').fadeIn('medium').delay(10000).fadeOut('slow', loopImages);
                setHeroHeight();
        });
    }

Outside document ready:

function loopImages(){
    homecount = homecount+1;
    if (homecount > 5){
        homecount = 1;  
    }
    $('.hero img')
        .attr('src', '/assets/img/backgrounds/home/hero'+homecount+'.jpg')
        .load(function(){ $('.hero img').fadeIn('fast')}).delay(10000).fadeOut('slow', loopImages);
}

Any help would be greatly appreciated

Thanks

Dave

Answer 1

I had a very similar problem when i was trying to show a series of quotes in a div, i achieved it by using the folowing code

 $(document).ready(function(){
   function runIt(){
     $('*img*').each(function(i, elem) {
       $("*container*").delay(5000).fadeOut(1000, function() {
         $(this).html($(elem).html());
       }).fadeIn(1000, runIt);
     });
   };
   runIt()
 });

*img*: here you're calling your images

*container*: this is the element where you want your image to appear.

You can see the code in action here: dinwoodie.net