JQuery fadeout / fadein to create sorted list

Question

I am trying to use JQuery to create a sorted list.

In theory this should be really simple, but I am having a lot of issues with this not working right.

I have a list of div blocks. At least 1 and max 8, in one or two rows. All div blocks are 250px high, and 25% wide...

-------------------------------------
|  div1  |  div2  |  div3  |  div4  |
-------------------------------------
|  div5  |  div6  |  div7  |  div8  |
-------------------------------------

I then have links to show some or all of these blocks, depending on which link is clicked.

My plan was to fade out all the DIVs and then fade in the ones needed, and my code is along the lines of the following...

<div id="container">
<div style="width:25% height:250px;" class="all category1">div1 content</div>
<div style="width:25% height:250px;" class="all category2">div2 content</div>
<div style="width:25% height:250px;" class="all category3">div3 content</div>
<div style="width:25% height:250px;" class="all category3">div4 content</div>
<div style="width:25% height:250px;" class="all category3">div5 content</div>
<div style="width:25% height:250px;" class="all category1">div6 content</div>
<div style="width:25% height:250px;" class="all category1">div7 content</div>
<div style="width:25% height:250px;" class="all category2">div8 content</div>
</div>

With the JQuery code...

$('#link1').click(function(){
$(".all").fadeOut(300);
$(".category1").fadeIn(300);
});
$('#link2').click(function(){
$(".all").fadeOut(300);
$(".category2").fadeIn(300);
});

This does "kind of" work, but it is very jumpy and not smooth at all, with DIV blocks fading in before the previous ones have faded out, etc.

I have tried queing and delaying the "fadein" call, but it isn't much better, and doesn't seem smooth or reliable.

I know there are plugins to do sorted lists, such as the "Isotope" plugin, but I need this to work in IE9, so that was out. (if anyone knows of a plugin that works well with IE9, I would be happy with that!)

I just want to do a nice simple fade out/in sorted list of these div blocks, and it shouldn't be too hard to get this to work reliably and smoothly?!

If the outer container could also animate in height as required (will always either be 250px or 500px high), that would be a massive added bonus :o)

Answer 1

Is this the kind of thing you are after? Fiddle

I used the completion callback to fire the FadeIn() function after the FadeOut has completed, however there is a trick to get that working properly which I found here: Related Problem specifically the 2nd comment: "I've used the :visible selector to combat the problem". Basically it is calling the FadeIn() function after all visible items have disappeared.

jQuery:

$('#link1').click(function(){
    $(".all:visible").fadeOut(300, function() {
        $(".category1").fadeIn(300);
    });
});
$('#link2').click(function(){
    $(".all:visible").fadeOut(300, function() {
        $(".category2").fadeIn(300);
    });
});