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.

Answer 1

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