filtered lists: fading out currently filtered list and fading in same list with new filter applied
<p>I've been trying to get a sort of rudimentary filter working. Basically, you click on a link and it filters the list (see code below). This actually works fine. However, I'd like pretty it up a bit by fading out the current list (whether it's filtered or not), and fading the list back in with the right filter applied. </p>

<p>Hope you get what I mean. Let me know if I don't make any sense.  </p>

<p><strong>HTML:</strong></p>

<pre><code>filter by: &lt;a href="#" class="clearfilter"&gt;all&lt;/a&gt;
&lt;h4&gt;venue&lt;/h4&gt;
&lt;a href="#location1" class="filter"&gt;location1&lt;/a&gt;, &lt;a href="#location2" class="filter"&gt;location2&lt;/a&gt;
&lt;h4&gt;photographer&lt;/h4&gt;
&lt;a href="#ben" class="filter"&gt;ben&lt;/a&gt;, &lt;a href="#ken" class="filter"&gt;ken&lt;/a&gt;, &lt;a href="#sam" class="filter"&gt;sam&lt;/a&gt;, &lt;a href="#susan" class="filter"&gt;susan&lt;/a&gt;
&lt;br/&gt;&lt;br/&gt;
&lt;ul&gt;
    &lt;li class="ken location1"&gt;&lt;a href="#"&gt;img 01&lt;/a&gt;&lt;/li&gt;
    &lt;li class="ken location1"&gt;&lt;a href="#"&gt;img 02&lt;/a&gt;&lt;/li&gt;
    &lt;li class="ken location2"&gt;&lt;a href="#"&gt;img 03&lt;/a&gt;&lt;/li&gt;
    &lt;li class="sam location2"&gt;&lt;a href="#"&gt;img 04&lt;/a&gt;&lt;/li&gt;
    &lt;li class="sam location2"&gt;&lt;a href="#"&gt;img 05&lt;/a&gt;&lt;/li&gt;
    &lt;li class="ben location2"&gt;&lt;a href="#"&gt;img 06&lt;/a&gt;&lt;/li&gt;
    &lt;li class="ben location2"&gt;&lt;a href="#"&gt;img 07&lt;/a&gt;&lt;/li&gt;
    &lt;li class="ben location2"&gt;&lt;a href="#"&gt;img 08&lt;/a&gt;&lt;/li&gt;
    &lt;li class="susan location1"&gt;&lt;a href="#"&gt;img 09&lt;/a&gt;&lt;/li&gt;
    &lt;li class="susan location1"&gt;&lt;a href="#"&gt;img 10&lt;/a&gt;&lt;/li&gt;
    &lt;li class="susan location2"&gt;&lt;a href="#"&gt;img 11&lt;/a&gt;&lt;/li&gt;
    &lt;li class="ken location2"&gt;&lt;a href="#"&gt;img 12&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>​<strong>jQuery</strong></p>

<pre><code>$(document).ready(function() {
    $(".filter").click( function () {
        var filterText = $(this).attr('href').replace('#','');
        $("li").show().not('.'+filterText).hide();
    });

    $(".clearfilter").click( function() {
        $("li").show();
    });
});
</code></pre>

<p><strong>CSS</strong></p>

<pre><code>li {
    margin-left:20px;
    margin-bottom:20px;
    border:1px solid red;
    width:40px;
    height:40px;
    display:block;
    float:left;
}
li a {
    width:40px;
    height:40px;
    display:block;
}​
</code></pre>

<p>​</p>

<p>I tried the usual fadeOut() and fadeIn() again but the filter seems to be applying to the already filtered list and nothing comes back. This si why I've got the initial <code>show()</code> in this line:  <code>$("li").show().not('.'+filterText).hide();</code> because that seems to reset the list.
But if I add the show() in it won't fade properly.</p>

<p>Thanks in advance for your help. Fiddle link: <a href="http://jsfiddle.net/gxfBD/33/" rel="nofollow">http://jsfiddle.net/gxfBD/33/</a></p>

<p><strong>EDIT:</strong>
It seems not even professionals get it right: <a href="http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-filterable-portfolio-with-jquery/" rel="nofollow">http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-filterable-portfolio-with-jquery/</a>. Theirs jumps about and shows items briefly that aren't supposed to be shown, too.  :/</p>

<p><strong>EDIT AGAIN (ALTERNATIVE ANSWER):</strong>
Marc's answer below gave me the kick-start I needed to work it out. my new jQuery is below:</p>

<pre><code>var filterText = "all";

$(document).ready(function() {
    $(".filter").click( function () {
        filterText = $(this).attr('href').replace('#','');

        if(filterText == "all") {
            $("#gallery a").colorbox({rel:'gallery'});
        }
        else {
            $("#gallery ."+filterText+" a").colorbox({rel:filterText});
        }
        showFilterList(filterText);
    });

    $("#gallery a").colorbox({rel:'gallery'});
});

function showFilterList(value) {
    if (value == "all") {
        $("#gallery").animate({
            opacity: 0
        }, 500, function() {
            // Animation complete.
            $("#gallery li").show(); //remove the filter so everything shows
        }).animate({
            opacity: 1
        }, 500);
    }
    else {
        $("#gallery").animate({
            opacity: 0
        }, 500, function() {
            // Animation complete.
            $("#gallery li").show(); //remove the filter so everything shows
            $("#gallery li").not('.'+value).hide(); //apply the new filter
        }).animate({
            opacity: 1
        }, 500);
    }
}
</code></pre>

<p>I've also combined the colorbox plugin and added the call to my click event. This allows the "image x of y" text to be set with the new filtered number of images in the list. </p>

<p>Hope that helps someone else. </p>
