jQuery cross blaknie dwa obrazy w pętli!

Question

Mam problem z ustaleniem, jak uzyskać prosty zanikanie w pętli zanikania do pracy. Jestem całkiem nowy w jQuery, jak możesz powiedzieć. Miałem już na to ochotę, ale teraz jest zbyt długo, aby pracować, więc pomyślałem, że poproszę o pomoc.

Co chcę zrobić:

Mam dwóch obrazów, ID użytkownika i # # img1 img2. Chcę, aby obraz 1 zanikał, a następnie zaczekaj, powiedzmy 6 sekund, a następnie zaniknij. Próbowałem funkcji .wait, ale przestało to działać. Udało mi się uzyskać pierwsze zdjęcie, które zniknie, ale bez czekania pomiędzy. Następnie chcę rozpocząć zanikanie obrazu 2 podczas gdy obraz 1 zanika, a następnie obraz 2, aby poczekać, a następnie zaniknąć, podczas gdy obraz 1 ponownie wróci i zapętli się na zawsze! Mam nadzieję, że ma to sens.

$(document).ready(function(){ 
    $('#img1').hide() 
.load(function() { 
    $(this).fadeIn(4500) 
    .fadeOut(4500); 
    $('#img2').hide().wait(9000) 
    .load(function() { 
    $(this).fadeIn(4500) 
    .fadeOut(4500); 
}); 

Wiwaty, to doprowadza mnie do szału. Ps możesz spróbować wyjaśnić, co dzieje się w tobie. Dzięki

Answer 1

Edytuj lat 2+ później: Istnieją lepsze sposoby, aby to zrobić ... więc zignorować tę odpowiedź.

---

chciałbym spróbować kombinacji wywołania zwrotne i setTimeout. (Opieram się na odpowiedzi Kobiego, od kiedy pisał podczas pisania).

W CSS, nadaj obu obrazom "wyświetlacz: brak;" zamiast ustawiania ich na początku w jQuery. Następnie w jQuery:

function imageOneFade(){ 
    $('#img1').fadeIn(2000, function(){ setTimeout("$('#img1').fadeOut(2000); imageTwoFade();",6000); }); 
} 

function imageTwoFade(){ 
    $('#img2').fadeIn(2000, function(){ setTimeout("$('#img2').fadeOut(2000); imageOneFade();",6000); }); 
} 

$(document).ready(function(){ 
    imageOneFade(); 
}); 

Mam nadzieję, że coś takiego działa.

Funkcja setTimeout pobiera dwa parametry.

setTimeout(WHAT WILL HAPPEN, HOW LONG TO WAIT) 

A fadeIn/Out funkcje mogą mieć drugi parametr, który wyzwoli, gdy efekt jest zakończona.

Answer 2

Dlaczego nie używasz rozwiązania już wykonanego, takiego jak Cycle plugin?

Ma dużo więcej opcji niż chcesz.

Jeśli naprawdę potrzebujesz tego zrobić samodzielnie, możesz obejrzeć kod źródłowy wtyczki. Nie zrobiłem tego, ale myślę, że koder używa kombinacji funkcji animate (z jQuery) i funkcji setTimeout (z czysto javascript). Używając tych funkcji, musi zrobić coś takiego, jak włączyć timer na pewien czas, a gdy czas się zakończy, uruchomi funkcję animacji, ustawiając krycie obrazu na 0 (dla ukrywania obrazu) i 1 (dla pokazanego obrazu).

Answer 3

Można użyć kombinacji wywołań zwrotnych jQuery i kodu JavaScript setTimeout.
setTimeout służy do opóźnień, a callbacks są używane po zakończeniu animacji (jest jednak wiele innych wywołań zwrotnych).

function startSlideshow(){ 
    $('#p1').fadeOut(2000, function(){ 
    setTimeout(function(){ 
     $('#p1').fadeIn(2000, startSlideshow) 
    },1000); 
    }); 
} 

$(document).ready(function(){ 
    startSlideshow(); 
}); 

Zobacz go w akcji: http://jsbin.com/ulugo

Answer 4

Oto pokaz slajdów z czterema obrazami, który nie korzysta z funkcji setTimeout, ale wykorzystuje funkcję opóźnienia.

<script> 
    function startSlideshow(){ 
    $("div.text_b1").fadeIn(1000).delay(10500).fadeOut(1500); //13000 
    $("div.text_b2").delay(13000).fadeIn(1500).delay(11000).fadeOut(1500); //27000 
    $("div.text_b3").delay(27000).fadeIn(1500).delay(11000).fadeOut(1500); //41000 
    $("div.text_b4").delay(41000).fadeIn(1500).delay(11000).fadeOut(1500, startSlideshow); //55000 
    } 

    $(document).ready(function(){ 
    startSlideshow(); 
    }); 
</script> 

zobaczyć go w akcji http://www.erestaurantwebsites.com/

Answer 5

podstawie funkcji opóźnienia(), oto rozwiązanie dla wielu obrazów, jeśli pętla obrazów w większych liczbach potrzebne. Daje to efekt przenikania B-> A (lub usuń + fadems/2 dla prostego efektu fadeOutIn). Umysł - obrazy muszą być na swoim miejscu: bezwzględny! (patrz przykład html).

jQuery:

function startSlideshow(){ 

    var dms = 2500; // image show duration in ms 
    var fadems = 750; // crossfade in ms 
    var imgnum = 5; // total number of images 
    var nms = 0; 

    // fadeInOut first image 
    $("#img1").fadeIn(fadems).delay(dms).fadeOut(fadems); 
    nms = nms + fadems*2 + dms- fadems/2; 

    // fadeInOut rest images 
    for (var i = 2; i<imgnum; i++){ 
     // remove +fadems/2 for fadeOut effect, instead of crossfade 
     $("#img"+i).delay(nms).fadeIn(fadems).delay(dms).fadeOut(fadems+fadems/2); 
     nms = nms + fadems*2 + dms - fadems/2; 
    } 
    // fadeInOut last image and start over 
     $("#img"+imgnum).delay(nms).fadeIn(fadems).delay(dms).fadeOut(fadems, startSlideshow); 
} 

startSlideshow(); 

HTML: uwaga: przy id obrazu jest twierdza przez ++: #, # img1 img2, img3 # .... # img128 itp

<style> 
    .crossfade { 
     /* image width and height */ 
     width: 160px; 
     height: 120px; 
     display: none; 
     position: absolute !important; 

    } 
</style> 

<div class="place_your_images_container_where_is_needed"> 

    <div id="img1" class = "crossfade" > 
     <img src="imageOne.png" /> 
    </div> 

    <div id="img2" class = "crossfade" > 
     <img src="image2.png" /> 
    </div> 

    <div id="img3" class = "crossfade" > 
     <img src="image3.png" /> 
    </div> 

    <div id="img4" class = "crossfade" > 
     <img src="imageFour.png" /> 
    </div> 

    <div id="img5" class = "crossfade" > 
     <img src="imageLast.png" /> 
    </div> 

</div> 

ps użyj przezroczystych obrazów PNG dla lepszego efektu.

Answer 6

Tak właśnie zrobiłbym z prostym jQuery. Zobacz fragment roboczy.

loopStart(); 
 

 
function loopStart() { 
 
    $("#image1").delay(2000).fadeOut("slow", function() { 
 
    loopTwo(); 
 
    }); 
 
}; 
 

 
function loopOne() { 
 
    $("#image1").fadeIn("slow", function() { 
 
    $("#image1").delay(2000).fadeOut("slow", function() { 
 
     loopTwo(); 
 
    }); 
 
    }); 
 
}; 
 

 
function loopTwo() { 
 
    $("#image2").fadeIn("slow", function() { 
 
    $("#image2").delay(2000).fadeOut("slow", function() { 
 
     loopOne(); 
 
    }); 
 
    }); 
 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img id="image1" src="http://lorempixel.com/city/200/200"> 
 
<img id="image2" style="display:none;" src="http://lorempixel.com/people/200/200">