CODEWITHSUNDEEP
javascriptjquery
michaelmcgurk
michaelmcgurk

Reputation: 6509

Loading elements one after another - simple jQuery

I have some JavaScript that loads a stack of separate elements based on their class name. However, I'd like to add a 1second delay on each, so they all appear one after another.

So i1 loads first then a second later i2 loads and so on...

How do I achieve this with my code?

<script>
jQuery(function($){

var i1 = $(".one"),
i2 = $(".two"),
i3 = $(".three");
i4 = $(".four");
i5 = $(".five");
i6 = $(".six");

$('.field').animate( {
marginTop:"0"
},600, function () {
i1.animate({
"opacity": 1
}),             
i2.animate({
"opacity": 1
}),     
i3.animate({
"opacity": 1
}),     
i4.animate({
"opacity": 1
})      
i5.animate({
"opacity": 1
}),     
i6.animate({
    "opacity": 1
}, 500);
});             

});
</script>

Many thanks for any help with this :)

Upvotes: 1

Views: 1850

Answers (6)

Dylan N
Dylan N

Reputation: 517

Try using jQuery .delay(), it allows you to delay the execution of functions that follow it in the queue.

http://api.jquery.com/delay/

UPDATED:

Working jsFiddle Example: http://jsfiddle.net/DylanNunns/su8jp/2/

jQuery(function ($) {
    var i1 = $(".one"),
        i2 = $(".two"),
        i3 = $(".three");
    i4 = $(".four");
    i5 = $(".five");
    i6 = $(".six");

    $('.field').animate({
        marginTop: "0"
    }, 600, function () {
        i1.delay(1000).animate({
            "opacity": 1
        }),
        i2.delay(2000).animate({
            "opacity": 1
        }),
        i3.delay(3000).animate({
            "opacity": 1
        }),
        i4.delay(4000).animate({
            "opacity": 1
        }),
        i5.delay(5000).animate({
            "opacity": 1
        }),
        i6.delay(6000).animate({
            "opacity": 1
        });
    });
});

Upvotes: 0

Mike Campbell
Mike Campbell

Reputation: 7978

I think I'd rather use a bit of recursion and use the callbacks for a cleaner implementation (in my mind ..)

var oneByOne = function($el) {
    $el.fadeIn(600, function() {
        if (!$el.next().length == 0)
            oneByOne($el.next());
    });
};
$first = $('#one-by-one').children().first();
oneByOne($first);

http://jsfiddle.net/mikecmpbll/sbwMx/

Alternatively, still using recursion but working with the array of items instead:

var oneByOne = function(arr) {
    $el = $(arr.shift());
    $el.fadeIn(600, function() {
        if (!$el.next().length == 0)
            oneByOne(arr);
    });
};
arr = $("#one-by-one").children().get();
oneByOne(arr);

http://jsfiddle.net/mikecmpbll/sbwMx/1/

Upvotes: 0

Ian
Ian

Reputation: 50905

Without leaking variables and having to add a new class, you can loop through the found elements and use setTimeout to delay time until the next. For example:

$(document).ready(function () {
    var i1 = $(".one"),
        i2 = $(".two"),
        i3 = $(".three"),
        i4 = $(".four"),
        i5 = $(".five"),
        i6 = $(".six"),
        iterator = function () {
            var arr = Array.prototype.slice.call(arguments, 0),
                len = arr.length,
                iterate = function (index) {
                    if (index === len) {
                        return;
                    }
                    arr[index].animate({
                        opacity: 1
                    }, 600, function () {
                        setTimeout(function () {
                            iterate(++index);
                        }, 1000);
                    });
                };
            iterate(0);
        };

    iterator(i1, i2, i3, i4, i5, i6);
});

DEMO: http://jsfiddle.net/FbGwQ/2/

Upvotes: 2

clinton3141
clinton3141

Reputation: 4841

I like to use jQuery's each method along with delay to help out with this because it gives you the index of an element which you can use to set the delay.

jQuery(function () {
  var animation_items = [
        ".one", ".two", ".three", ".four", ".five", ".six"
      ];

  $.each(animation_items, function(index, item) {
    $(item).delay(index * 1000).animate({
      opacity: 1
    }, 500);
  });
});

You also get the added bonus of it working with a specific class instead of specifying them all separately. This makes everything more general and easier to maintain. You can simply add another div to your HTML without having to edit the JavaScript. 

<div class="fade_in"></div>
<div class="fade_in"></div>
<div class="fade_in"></div>


jQuery(function () {
  var delay = 1000;

  $('.fade_in').each(function(index, item) {
    $(item).delay(index * 1000).animate({
      opacity: 1
    }, 500);
  });
});

Here's a demo

Upvotes: 0

PSL
PSL

Reputation: 123739

You can try this way:-

Html

<div class="one slide">1</div> <!-- give some common class all these-->
<div class="two slide">2</div>
<div class="three slide">3</div>
<div class="four slide">4</div>
<div class="five slide">5</div>

JS

var all = $('.slide').get(); //Get all the element to slide into an array.

function animate() {

    var elem = all.shift(); //Remove the top element from the array

   //animate it
    $(elem).animate({
        "opacity": 1
    }, function () {
        if (all.length > 0)
              window.setTimeout(animate, 1000); //set the time out after the delay of 1 sec for next element to animate.
    });
}
animate();

Demo

Upvotes: 3

A. Wolff
A. Wolff

Reputation: 74420

For each element, set animate function inside the callback of animate method of the previous element.

$('.field').animate({
    marginTop: "0"
}, 600, function () {
    i1.animate({
        "opacity": 1
    }, function () {
        i2.animate({
            "opacity": 1
        },etc...);

Upvotes: 2

Related Questions