Question

In the code below the page will fade in, and then it will fade in the list items on the left, and then its suppose to fade in each thumbnail on the right. But because of me using .delay() it ends up skipping the loading of some or all of the thumbnails. Is there something else other than .delay() I can use to halt the execution of the thumbs fading in before they should begin to?

//Showcase
    $('#showcase').animate({'opacity' : 0}, 0);
    fadeInDivs(['#showcase']);
    function fadeInDivs(els) {
        e = els.pop();
        $(e).   delay(750).animate({'opacity' : 1}, 1000, function(){
            if (els.length) fadeInDivs(els);
        });
    };

    $('#showcase').queue(function(){

        //fade in each filter
        $('#filters li').each(function(i, item) {
            setTimeout(function() { $(item).animate({'opacity' : 1}, 1000); }, 50 * i);
        });

        //fade in each thumbnail
        $('.thumb').delay(1000).each(function(i, item) {
            setTimeout(function() { $(item).animate({'opacity' : 1}, 1000); }, 500 * i);
        });
    });

Answer 1

Try this fiddle. I think this what you’re looking for. Let me know if it’s not. Here is the jQuery code:

    $('#showcase').queue(function() {
    var i = 0;
    var length = $('#filters li').length;
    //fade in each filter
    $('#filters li').each(function(i) {

        //alert(i);
        $(this).delay(750*i).animate({
            'opacity': 1
        }, 1000, function() {
            if (i == length) {
                //fade in each thumbnail
                $('.thumb').each(function(i) {
                    $(this).delay(750 * i).animate({
                        'opacity': 1
                    }, 1000);
                });
            }
        });
        i++;
    });

});