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

Question

I am having trouble trying to figure it out today, I want to make 5 elements inside my DOM (which are listed under the same attribute element, $ ('. Elements')) disappear and disappear, and after I read the API a bit, I thought .each () would be a terrific idea to realize the fading and fading of the storefront gallery.

However, I am currently using:

$('.elements').each(function() {
    $(this).fadeIn(2000).delay(200).fadeOut(2000).show();
})

but everything immediately disappears and disappears.

How to make a consistent effect when everything is connected together and it starts from the first element in the list (aka - $ ('elements'). Eq (0)?) To the last, and then restarts again?

Do I really need a while loop to do this in javascript / jquery? I was hoping there would be a similar function that I could use for jQuery to reduce the load and create files.

Also, is there a way to limit the flipping of images from my div?

Answer 1

(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 end without end.

---

Second update : another, perhaps 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 2

You can add callback

official document:

('#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 3

CSS:

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

Answer 4

:

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

})($('a'))

:

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

})($('a'))