jquery - Annoying Bug in banner cycle -
i have created rotating banner script new site i'm developing view banner here(it rotates every 10 seconds)
unfortunately transition seems biut buggy, , image fade out, show same image again , fade in new one. think have made simple error somewhere, can't figure out is. code used cycle 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 appreciated
thanks
dave
i had similar problem when trying show series of quotes in div, achieved using 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 images
*container*
: element want image appear.
you can see code in action here: dinwoodie.net
Comments
Post a Comment