CODEWITHSUNDEEP
jquery
user964351
user964351

Reputation: 271

Make a simple fadeIn fadeOut & loop with jQuery

I want to make a simple fadeIn fadeOut & loop with jQuery.

First time is OK! But when loop again ,the fadeIn #pic2 hidden. How to fix it??

html

<div id="pics">
<img src="bg01.jpg" id="pic1" />
<img src="bg02.jpg" id="pic2" />
</div>

css

#pics img{
position:absolute;
display: none;
}

js

$(document).ready(function() {

    runslide();

    function runslide() {
    $('#pic1').fadeIn(1500).delay(3500).fadeOut(1500);
    $('#pic2').delay(5000).fadeIn(1500).delay(3500).fadeOut(1500);

    setTimeout(runslide, 10000);
    }

});

Upvotes: 2

Views: 7598

Answers (1)

Nick Clark
Nick Clark

Reputation: 4467

Your code relies on the timing of the animations to be very exact and the browser tends to get out of sync. You should modify your Javascript to look like this:

runslide();

function runslide() {
    $('#pic1').fadeIn(1500).delay(3500).fadeOut(1500, function() {
        $('#pic2').fadeIn(1500).delay(3500).fadeOut(1500, function() {
            runslide();
        });
    });
}

This will keep the animation in sync by waiting for the previous animation to end before starting the next animation.

Here is a working example. I replaced your images with text, but otherwise it is the same code. http://jsfiddle.net/27uy8/

Upvotes: 4

Related Questions