Why aren't fadeIn and animate duration working for my code?

Question

I want to change the opacity of an object instead of fading in content that was completely hidden so I changed

$(".thumb").each(function(i) {
    $(this).delay(500*i).fadeIn(1000);
});

to

$(".thumb").each(function(i) {
    $(this).delay(500*i).animate({'opacity' : 1}, 1000, function(){});
});

and the css from display:none to opacity: 0; (in all browsers) but I noticed that the numeral value 1000 isnt doing anything at all.. Maybe it is and I'm not noticing, but I have changed that form 1 to 100000 and I see no difference. Could someone help me understand whats going on?

edit: here is the full code.. maybe something is altering the fade in?

//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); }, 500 * i);
    });

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

this is what was causing the problem..

<script type="text/javascript">
var $container = $('.isosort')
// initialize Isotope
$container.isotope({
        // options...
        resizable: false, // disable normal resizing
        layoutMode : 'fitRows',
        animationEngine : 'best-available',

        // set columnWidth to a percentage of container width
        masonry: { columnWidth: $container.width() / 5 }
});

// update columnWidth on window resize
$(window).smartresize(function(){
        $container.isotope({
        // update columnWidth to a percentage of container width
        masonry: { columnWidth: $container.width() / 5 }
        });
});
    $('#filters a').click(function(){
        var selector = $(this).attr('data-filter');
        $container.isotope({ filter: selector });
        return false;
    });
</script>

its at the bottom of my index.php file right before the </body> tag.. is there a better place to put this?

Answer 1

I think this is what you want

$(".thumb").each(function(i, item) {
    setTimeout(function() { $(item).animate({'opacity' : 1}, 1000); }, 500 * i);
});