JQuery Script Can't Achieve Loop

Question

I'm trying to get this script to loop, yet I can't.

$(document).ready(function inout() {
    $('#review1').fadeIn(1500).delay(3500).fadeOut(1500);
    $('#review2').delay(3500).fadeIn(1500).delay(3500)
     });

try add ; after $('#review2').delay(3500).fadeIn(1500).delay(3500) — NullPoiиteя
– NullPoiиteя, Commented Jul 14, 2012 at 5:26

jfriend00 · Accepted Answer · 2012-07-14 05:52:46Z

2

If you want review1 to fadeIn, then fadeOut, then review2 to fadeIn, then fadeOut with delays between, you can do it like this;

$(document).ready(function inout() {
    function cycle() {
        $('#review1').fadeIn(1500).delay(3500).fadeOut(1500, function() {
            $('#review2').delay(3500).fadeIn(1500).delay(3500).fadeOut(1500, function() {
                setTimeout(cycle, 1500);
            });
        });
    }

    cycle();
});

This uses the jQuery animation completion function in order to link separate animations so one starts after the other completes. These are asynchonous animations so you can't just use normal sequential programming.

edited Jul 14, 2012 at 5:52

answered Jul 14, 2012 at 5:29

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Uriel Katz Over a year ago

How come it fades out without prompting it to? setTimeout just pauses the sequence right?

jfriend00 Over a year ago

I modified my answer to make sure both review1 and review2 fadeIn, then fadeOut since that must be what you want if you want a repeating cycle.

Collectives™ on Stack Overflow

JQuery Script Can't Achieve Loop

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related