How to make a smooth fadeIn() jQuery

Question

Problem The fadeins and fadeouts are sporadic. Ideally, I would like the fadeIn() to happen one by one; while, the fadeOut()'s all at once. any combinations of this would be A-ok with me.

Background: I've written a quick filter to hide and show through my portfolio pieces. Along with a few animated interaction to support it. The problem is that my interactions are a bit jarring, so I would like to add a transition between them. The problem is that, the simple fadeIn() fadeOut() is really wonky. Heres a sample of it's wonkyness:

CLICK HERE LIVE DEMO (i've only applied this transition to print navigation button)

UPDATE

I've solved my problem with this script

$(".box").find('.video, .print, .web').closest('.box').show();  
$(".box").find('.web, .video, .print').closest('.box').fadeOut('fast');
$(".box").find('.print').closest('.box').each(function(index) { 
$(this).delay(400*index).fadeIn(300);   
}); 

Pared down script(script.js)

    if( id == 'printInteract'){
        //used for muliple click to refresh the boxes
        $(".box").find('.video, .print, .web').closest('.box').show();
       //finds the classes then filters them out
        $(".box").find('.web, .video').closest('.box').fadeOut()
           //fades in the .box(s) for print
        $(".box").find('.print').closest('.box').fadeIn();  
    }

BOX HTML

<div class="box">
<h1 title="Light me up"></h1>
  <div class="innerbox">
    <figure><img src="http://4.bp.blogspot.com/-FtykQCyUHtg/T51fiRiRE-I/AAAAAAAADTo/mUiItl6lG0Q/s400/inspirational-animated-photography-awesome-4.gif" /></figure>
    <ul class="categorySelect">
<!-- this example has 3 tags so all buttons will show it -->        
      <li class="print"></li>
      <li class="video"></li>
      <li class="web"></li>
    </ul>
  </div>
</div>
<!--end of box--> 

Transition trigger HTML

<li id="printInteract" class="navCenter"><a id="activePrint" class="navBg" href="#"><div class="relativeCenter"><img src="asset/img/print.gif" /><h3 class="print">print</h3></div></a></li>

Finally can anyone explain why the these boxes are so random? is it load times? is it just my script hierarchy(I know my script is poorly written) Notes on the fix would be much much appecated for I'm pretty new to jQuery script writing.

Answer 1

Here's a different take on how to do the animation. The boxes that are being removed are animated to zero width. The boxes that are being added are animated from zero width to their normal width. This gives the effect of things growing into place. All boxes are removed, then added in sequence. You can see it work here:

http://jsfiddle.net/jfriend00/wEZmw/

The core part of the code is a couple jquery add-on methods that let you do fades in sequence. There are also tweaks to the CSS to help the animations look smoother.

jQuery.fn.fadeInSequence = function(t, fn) {
    if (typeof t == "function") {
        fn = t;
        t = 1000;
    }
    t = t || 1000;
    var pos = 0;
    var self = this;
    function fadeInNext() {
        if (pos < self.length) {
            var item = self.eq(pos++);
            if (item.is(":hidden")) {
                item.css({width: 0, overflow: "hidden"});
                item.show().animate({width: "25%"}, t, fadeInNext);
            } else {
                fadeInNext();
            }
        } else {
            if (fn) {
                fn.call(self);
            }
        }
    }
    fadeInNext();
    return(self);
}

jQuery.fn.fadeOutSequence = function(t, fn) {
    if (typeof t == "function") {
        fn = t;
        t = 1000;
    }
    t = t || 1000;
    var pos = 0;
    var self = this;
    function fadeOutNext() {
        if (pos < self.length) {
            var item = self.eq(pos++);
            if (item.is(":visible")) {
                item.css("overflow", "hidden").animate({width: "0"}, t, function() {
                    item.hide();
                    fadeOutNext();
                });
            } else {
                fadeOutNext();
            }
        } else {
            if (fn) {
                fn.call(self);
            }
        }
    }
    fadeOutNext();
    return(self);

}

function doFadeInOut(outSelector, inSelector, hideSelector) {
    var hideItems = $(hideSelector).hide();
    var outItems = $(".box").find(outSelector).closest(".box");
    var inItems = $(".box").find(inSelector).closest(".box");
    outItems.not(inItems).fadeOutSequence(function() {
        inItems.fadeInSequence(function() {
            hideItems.fadeIn(500);
        });
    });
}

And, here's a version where I've removed a lot of the copied code (DRY) so one common code block processes all four clicks: http://jsfiddle.net/jfriend00/XCVy9/

Answer 2

Pass a callback function and search for hidden boxes on it.

Something like this:

function showNextBox() {
    $('.box:hidden').first().fadeIn('slow', function(){
         showNextBox();
     });
}
$(function(){
     showNextBox();
});

Answer 3

You can just use show('slow') or fadeIn('slow') or time in milliseconds fadeIn(500)

Check out the documentation for more info.to add hierarchy use function as the second argument:

$(".box").find('.video, .print, .web').closest('.box').show("slow", function () {
    $(".box").find('.web, .video').closest('.box').fadeOut();
});