How to loop iframes using jquery? -

i have 2 iframes. when page loads, iframe1 gets loaded after 8 seconds, , need show iframe2 replacing iframe1 on indefinite loop.

i tried following code , set timeout 8 seconds , 10 seconds, iframe1 changes within 2 seconds.

function preview() {     $('#iframe1').hide();     $('#iframe2').show();     settimeout(function() {         $('#iframe2').hide();         $('#iframe1').show();     }, 8000); }; setinterval(preview, 10000) 

the above doesn't load smoothly either. how can show/hide them seamlessly?

you can perform action using recursion function , pass arguments

$('#iframe2').hide(); animateinfinite('#iframe', 1)  function animateinfinite(str, last) {     $(str + last).show();     settimeout(function () {         $(str + last).hide();         animateinfinite('#iframe', ((last == 1) ? 2 : 1));       }, 8000)     } 

or use setinterval

var iframe = $('[id^=iframe]').hide(); iframe.eq(0).show(); setinterval(function () {     iframe.toggle(); }, 1000); 

demo