CODEWITHSUNDEEP
jqueryjquery-animateinfinite-loop
GTCrais
GTCrais

Reputation: 2087

jQuery crossfade images infinitely

This code alternates 2 images infinitely, and it works:

<img src="../images/opisSlike/nagrada2a.jpg" class = "nag2altImg" alt=""/>
<img src="../images/opisSlike/nagrada2b.jpg" class = "nag2altImg2" alt=""/>
//second image starts with opacity 0

<script type="text/javascript">

function myAnimate(){

    $('img.nag2altImg').delay(2500).animate({"opacity": "0"}, 1500);
    $('img.nag2altImg').delay(2500).animate({"opacity": "1"}, 1500);        

    $('img.nag2altImg2').delay(2500).animate({"opacity": "1"}, 1500);
    $('img.nag2altImg2').delay(2500).animate({"opacity": "0"}, 1500);       

    // this animation lasts for 8 seconds: 2500 delay + 1500 animation + 2500 delay + 1500 animation
}

$(document).ready(myAnimate());
$(document).ready(setInterval(function() {myAnimate()}, 8000));

</script>

But I was wondering, is there a more elegant way, so to say, to make something like that?

Upvotes: 0

Views: 1038

Answers (2)

Rafael Herscovici
Rafael Herscovici

Reputation: 17124

    function myAnimate(){ 

        $('img.nag2altImg').delay(2500).animate({"opacity": "0"}, 1500); 
        $('img.nag2altImg').delay(2500).animate({"opacity": "1"}, 1500);         

        $('img.nag2altImg2').delay(2500).animate({"opacity": "1"}, 1500); 
        $('img.nag2altImg2').delay(2500).animate({"opacity": "0"}, 1500);        

        // this animation lasts for 8 seconds: 2500 delay + 1500 animation + 2500 delay + 1500 animation 
        // run forever.
        myAnimate();
    } 

$(document).ready(myAnimate());

this would be a better solution:

function myAnimate() {
    $('img.nag2altImg2').animate({
        opacity: 1.0
    }, {
        duration: 1500
    }).animate({
        opacity: 0
    }, {
        duration: 1500
    }).animate({
        opacity: 1.0
    }, {
        duration: 1500,
        complete: myAnimate
    })
}
$(document).ready(myAnimate());

Upvotes: 1

Travis J
Travis J

Reputation: 82297

Use one timer. Make it global. Have all your animation based off the one timer. Hand code the animations and leave jQuery behind because it is slow and has issues doing multiple animations concurrently. Wrap the whole thing in a custom library. Make one call from your front end.

Upvotes: 0

Related Questions