How to loop animation in jQuery

Question

I´m trying to loop this animation but I don´t know why it does not work ? I have 4 divs with differences images and I want to loop this to replay again and again.

$(document).ready(function () {
    setInterval("comeon()", 2000);
});

function comeon() {
    var current = $(".current");
    var next = current.next();

    if (next.length == 0) {
        next = $(".current:first");
    }

    current.removeClass('current').addClass('previous');
    next.css("opacity", "0.0").addClass("current").animate({
        opacity: 1.0
    }, 500, function () {
        current.removeClass("previous");
        comeon();
    });

What I have done wrong ?

**UPDATE**



<div id="slider">
<div class="current" style="background-color:#F00;position:absolute; width:400px; height:400px;"></div>
<div style="background-color:#00F;position:absolute; width:400px; height:400px;"></div>
<div style="background-color:#0F0;position:absolute; width:400px; height:400px;"></div>
<div style="background-color:#FF3;position:absolute; width:400px; height:400px;"></div>

</div><!-- End slider-->

Please have a look at http://jsfiddle.net/7kt9z/6/

You are calling comeon() "recursively" from the animation callback already. Why do you think you would need setInterval? It should be enough to start the process with a single call at dom ready. — Bergi
– Bergi, Commented Sep 23, 2013 at 18:56
@Bergi good catch! Either remove the recursive call, or remove the interval. — 000
– 000, Commented Sep 23, 2013 at 18:59

000 · Accepted Answer · 2013-09-23 18:27:50Z

1

next = $("cur:first");

This is attempting to select an element like <cur>. Oops!

You want:

next = $(".current:first");

or

next = cur.first();

Edit

I finally understand what you need:

next = current.siblings().first();

edited Sep 23, 2013 at 18:27

answered Sep 23, 2013 at 18:09

000

27.3k10 gold badges74 silver badges103 bronze badges

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

9 Comments

Poramat Fin Over a year ago

Hello, thanks again. I have done it if you look at my if clause above. But it loop only the first 2 divs. :S

Poramat Fin Over a year ago

I´m not used to jsfiddle. I can axplain you here. RIght now I have 4 divs with absolute position. And I´m trying to make slide show. The problem is when the last div show, the function will not loop again (I want none stop) Although I put the next = $(".current:first"); I believe I have placed it in the wrong way ?

000 Over a year ago

I've updated with the answer I provided, and added the missing } at the end: jsfiddle.net/7kt9z/10 It works fine.

000 Over a year ago

Although it can be done without the interval as well: jsfiddle.net/7kt9z/17

Poramat Fin Over a year ago

Yeahhhh this s what I want ! Can you axplain me something ? Why siblings().first(); ? But not $("div.current:first"); ? 1.

|

the.luczy · Accepted Answer · 2013-09-23 18:50:14Z

0

setInterval needs to be used in a certain way.

You need to assign setInterval to a variable, and this assignment should be attached to an event.

var setIt;
$(window).load(function() {
    setIt = setInterval(comeOn, 1000);
});

Since you're using images, you can wait for all the images to load and then starting your slider (that's using the load event to assign setInterval to the variable setIt).

Also, do not wrap your function in qoutes in setInterval. Instead of:

setInterval("comeOn()", 1000)

Do this:

setInterval(comeOn, 1000)

I've got a working example here: http://codepen.io/anon/pen/rHzpL

answered Sep 23, 2013 at 18:50

the.luczy

362 bronze badges

2 Comments

Bergi Over a year ago

Why would he need to assign the result of setInterval to any variable, he does not try to clear it anywhere?

000 Over a year ago

This answer does not do anything for the issues at hand.

Collectives™ on Stack Overflow

How to loop animation in jQuery

2 Answers 2

9 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related