Jak zapętlić elementy iframe za pomocą jquery?

Question

Mam dwa elementy iframe. Po załadowaniu strony element iframe1 zostanie wczytany po 8 sekundach i muszę wyświetlić element iframe2 zastępujący element iframe1 w nieskończonej pętli.

Próbowałem następujący kod i ustawić limit czasu jako 8 sekund i 10 sekund, ale iframe1 zmienia się w ciągu 2 sekund.

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

Powyższe informacje nie ładują się płynnie. Jak mogę je łatwo pokazać/ukryć?

Answer 1

Można wykonać tę czynność przy użyciu funkcji rekurencji i przekazać argumenty

$('#iframe2').hide(); 
animateInfinite('#iframe', 1) 

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

Albo używanie setInterval

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

DEMO

Answer 2

Możesz przełączać;

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

Answer 3

Pierwszy prostu pokazać drugi iframe

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

teraz sprawdzić, czy drugi iframe jest visible

if($('#iframe2').is(':visible')){ 
setTimeout(function() { 
     $('#iframe2').hide(); 
     $('#iframe1').show(); 
    }, 8000); 
} 

EDIT: Musisz umieścić kod wewnątrz document.ready

$(function(){ 
if($('#iframe2').is(':visible')){ 
setTimeout(function() { 
     $('#iframe2').hide(); 
     $('#iframe1').show(); 
    }, 8000); 
} 
}); 

Sprawdź Fiddle Link

Answer 4

@Anil Kumar odpowiedź jest dobra, ale jeszcze niezupełnie, toggle() animuje zmianę, jeśli robisz to w tym samym czasie, nie czekając, aż ktoś zrobi, aby przełączyć drugą, będziesz miał 2 pływające tam iframe.

Oprócz @Anil Wszystko chcę dodać jest następujące zmiany:

function preview(duration, hide) { 
    var hide = hide || 1; 
    var show = hide === 1 ? 2 : 1; 

    $('#iframe'+hide).toggle(500, function() { 
     $('#iframe'+show).toggle(500); 
     setTimeout(function() { 
      preview(duration, show); 
     }, duration); 
    }); 
} 

To niesprawdzone ale co należy zrobić tak czy inaczej jest zastosowanie przełącznika dla ciebie, przełączanie identyfikatory z elementami każde wezwanie, które najpierw animuje widoczny element, a następnie animuje niewidoczny element.

Zapewnia to, że elementy nie kolidują ani nie przerywają przepływu elementów. Ponadto dodałem argument duration do swojej funkcji - w ten sposób można wywołać funkcję tak:

preview(10000)

jeśli #iframe2 jest widoczny pierwszym użyciu, że numer identyfikacyjny, aby go ożywić pierwszy, domyślnie jeden widoczny w funkcji.

preview(10000, 2)

Utrzymuje również odtworzenie obiektów jQuery cały czas których telefony nie lubię (może to spowolnić em w dół bardzo złe), więc starają się buforować tych zmiennych poza funkcją i przekazać je być może używając innej sztuczki, która przełącza elementy.