CODEWITHSUNDEEP
jqueryloopscallback
Clinton Green
Clinton Green

Reputation: 9977

jQuery how to loop function

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.

Upvotes: 1

Views: 267

Answers (5)

Roko C. Buljan
Roko C. Buljan

Reputation: 206111

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();

Upvotes: 3

charlietfl
charlietfl

Reputation: 171669

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();
})

Upvotes: 0

Travis J
Travis J

Reputation: 82287

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);

Upvotes: 0

Maxweel
Maxweel

Reputation: 194

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 > ...

Upvotes: 0

dunli
dunli

Reputation: 1376

Have you tried using setInterval:

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

Upvotes: 1

Related Questions