jQuery how to loop function

Question

I want to fadeOut the first div every few seconds, this code works once:

$('.comment:first').delay(4000).fadeOut();

and to try and make it run continually I've been trying to do a callback function or loop but finding no joy. I'm not familiar with these types of functions. Here is my attempt so far:

$('.comment:first').delay(4000).fadeOut( function(){
                $(this).delay(4000).fadeOut();
});

EDIT: After div.comment:first is faded out, the second div.comment would now be first in line so I want to then fadeOut that div and continually run that function. I do not want the first div.comment to ever fade back in. Sorry for the confusion.

Does it fade in as well? Because if the first div is faded out, there is no need to call the method again. — Felix Kling
– Felix Kling, Commented Jan 11, 2013 at 0:33
I have added a better description of what I want. I want the first div to fade out, and then fadeOut the next div that takes it place to fadeOut as well. I have a row of 30 divs and I want the function to run until all of the divs have faded out. — Clinton Green
– Clinton Green, Commented Jan 11, 2013 at 0:56

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

This will stop on the last element as you need it to
(otherwise remove the if and use .eq(++C % N) ! :)

jsBin demo

$('.comment:gt(0)').hide();   // hide all but first one
var N = $('.comment').length; // count comments
var C = 0;             // just a useful counter

function loop(){
     if(++C < N){       // this will prevent the loop to run infinitely
         $('.comment').delay(1000).fadeTo(400,0).eq(C).fadeTo(400,1,loop);
     }
}

loop();

Loop explained:

$('.comment')           // all comments...
    .delay(1000)        // wait for some time and...
    .fadeTo(400,0)      // fadeTo 0
    .eq(C)              // just, the one which index equals to preIncremented C
    .fadeTo(400,1,loop) // fade him to 1 and callback the LOOP !
;

EDIT
After the OP leaved me a comment:

jsBin demo

var N = $('.comment').length;
var C = -1;

function loop(){
     if(++C < N)
     $('.comment').eq(C).delay(1000).slideUp(400, loop);
}

loop();

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jan 11, 2013 at 1:01

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

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

3 Comments

jfriend00 Over a year ago

+1 - this is the correct way of doing it where you use animation chaining and the completion function of the last animation to restart the loop.

Clinton Green Over a year ago

Hi roXon, that's nearly there the only difference is I want all my divs to be visible by default. Then only hide one at a time. My layout is 2 rows of divs, when the first one is hidden then the second one takes its place and a div from the bottom row fills in the gap on the first row. Sorry if this is confusing. Thanks

Roko C. Buljan Over a year ago

@ClintonGreen added a new demo, next time help us to help you in the question! ;) happy coding!

dunli · Accepted Answer · 2013-01-11 00:33:05Z

1

Have you tried using setInterval:

setInterval(function(){
    $('.comment:first').fadeOut();
}, 4000);

answered Jan 11, 2013 at 0:33

dunli

1,38610 silver badges18 bronze badges

Comments

Maxweel · Accepted Answer · 2013-01-11 00:40:57Z

0

The fadeOut function can be called this way (http://api.jquery.com/fadeOut/):

.fadeOut( [duration ] [, complete ] )

I haven't used it for a while but I'd say that you should 1) write the duration as first parameter 2) use as callback a function that fades the div back in

Then in the callback of the fadeIn point back to the original function that launches the fadeOut, this way you'll have a cycle FadeOut > FadeIn > FadeOut > ...

answered Jan 11, 2013 at 0:40

Maxweel

3042 silver badges8 bronze badges

Comments

Travis J · Accepted Answer · 2013-01-11 00:41:33Z

0

Just use an interval

window.setInterval(function(){ $('.comment:first').fadeOut(); }, 4000);

To make it togglefade:

setInterval(function(){ 
 if( $('.comment:first:hidden').length > 0 ){
   $('.comment:first').fadeIn();
 }else{
   $('.comment:first').fadeOut();
 }
}, 4000);

edited Jan 11, 2013 at 0:41

answered Jan 11, 2013 at 0:33

Travis J

82.5k43 gold badges213 silver badges280 bronze badges

Comments

charlietfl · Accepted Answer · 2013-01-11 00:45:59Z

0

Here's a function that gets called repeatedly from complete callback of second animation which needs to show the element after it has been faded out.

var $commentFirst=$('.comment:first')

function fadeDiv(){
   $commentFirst.delay(4000).fadeOut( function(){
          /* fade it back in, call function again when done*/
          $commentFirst.delay(4000).fadeIn(fadeDiv);
   });

}
/* on page load*/
$(function(){
    fadeDiv();
})

edited Jan 11, 2013 at 0:45

answered Jan 11, 2013 at 0:38

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Collectives™ on Stack Overflow

jQuery how to loop function

5 Answers 5

jsBin demo

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related