jQuery Animation, Chaining, .each() and .animate() (or fadeIn() and fadeOut())

Question

I\'m having a bit of a trouble trying to figure this out today, i want to make 5 items inside my DOM (which is listed under the same attribute element, $(\'.elements\')) fade in

Answer 1

You can add a callback

offical doc :

('#clickme').click(function() {
  $('#book').fadeOut('slow', function() {
    // Animation complete.
  });
});

and call the same function with i++ et $('.elements').eq(i)

http://jsfiddle.net/dFnNL/

Answer 2

(function loop() {
  $('.elements').each(function() {
    var $self = $(this);
    $self.parent().queue(function (n) {
      $self.fadeIn(2000).delay(200).fadeOut(2000, n);
    });
  }).parent().promise().done(loop);
}());

demo: http://jsfiddle.net/uWGVN/2/

updated to have it looping without end.

---

2nd update: a different, probably more readable, approach:

(function fade(idx) {
  var $elements = $('.elements');
  $elements.eq(idx).fadeIn(2000).delay(200).fadeOut(2000, function () {
    fade(idx + 1 < $elements.length ? idx + 1 : 0);
  });
}(0));

​demo: http://jsfiddle.net/uWGVN/3/

Answer 3

Beautiful way :

(function hideNext(jq){
        jq.eq(0).hide("slow", function(){
            (jq=jq.slice(1)).length && hideNext(jq);
        });

})($('a'))

last first :

(function hideNext(jq){
                jq.eq(jq.length-1).hide("slow", function(){
                    (jq=jq.slice(0,length-1)).length && hideNext(jq);
                });

})($('a'))

Answer 4

For your overflowing , style it with CSS:

div.(class) { position:relative; overflow:hidden; }