How to loop iframes using jquery?

Question

I have two iframes. When the page loads, iframe1 gets loaded after 8 seconds, and I need to show iframe2 replacing iframe1 on an indefinite loop.

I tried the following code and set the timeout as 8 seconds and 10 seconds, but 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 I show/hide them seamlessly?

Answer 1

You can perform this action using recursion function and pass the 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

Answer 2

You can toggle;

function preview() {
        $('#iframe1').toggle(500);
        $('#iframe2').toggle(500);
    };
    setInterval(preview, 10000)