CODEWITHSUNDEEP
javascriptjquerycss
Joe Bobby
Joe Bobby

Reputation: 2811

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

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?

Upvotes: 5

Views: 495

Answers (2)

Merlyn Morgan-Graham
Merlyn Morgan-Graham

Reputation: 59111

I noticed that the numeral value 1000 isnt doing anything at all

What are you expecting it to do? It is the time the function takes, in milliseconds, to finish its animation cycle.

See:

See this fiddle:

The higher you set the value, the longer it takes the fadeIn or animate to completely fade in the element.

Update:

updated top post with the whole javascript that animates the page

The new code hides the #showcase, but doesn't hide the #filters li or .thumb elements. So when you fade in the showcase, the filters and thumbs are already visible. The fadeIn effect applied to them won't show, since you're already at 100% opacity.

Here's a modification to your code that should fix that problem. In particular, I'm selecting all those items when setting the opacity value:

http://jsfiddle.net/eU9qU/

//Showcase
$('#showcase, #filters li, .thumb').css('opacity', 0);
fadeInDivs(['#showcase']);

function fadeInDivs(els) {
    e = els.pop();
    $(e).delay(750).animate({'opacity' : 1}, 10000, function(){
        if (els.length)
            fadeInDivs(els);
    });
};

$('#showcase').queue(function() {
    //fade in each filter
    $('#filters li').each(function(i, item) {
        $(item).delay(500*i).animate({'opacity' : 1}, 10000);
    });

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

Upvotes: 0

Adam Rackis
Adam Rackis

Reputation: 83358

I think this is what you want

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

Upvotes: 2

Related Questions