javascript - jquery background-image swicher -

javascript - jquery background-image swicher -

html

<aside> // floats right </aside> <div class="backimage" > </div>

jquery

$(document).ready(function(){ var = 0; var total = $('#total').val(); var image = $('.backimage'); var images = []; for(i = 0; i<total; i++) { images[i] = $('#image'+i+'').val(); } image.css('background-image', 'url('+images[images.length-1]+')'); image.css('background-size', '930px 500px'); image.css('background-repeat', 'no-repeat'); setinterval(function(){ image.fadeout(1000, function(){ image.css('background-image', 'url('+images[i++]+')'); image.fadein(1000); }); if(i == images.length) = 0; }, 5000); });

suppose simple background-image switcher problem when background-image fadein backimage div appears in front end of floating aside before going behind img tag sense create load time slower, need helper before considering alternatives

ideally needs jsfiddle see issue, guess need set div outside backimage, , set width , height on this.

when jquery's fadeout reaches 0, display style set none. guess when layout breaks.

javascript jquery html css