Question

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.

Hope you get what I mean. Let me know if I don’t make any sense.

HTML:

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

​jQuery

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

    $(".clearfilter").click( function() {
        $("li").show();
    });
});

CSS

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;
}​

​

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 show() in this line: $("li").show().not('.'+filterText).hide(); because that seems to reset the list.
But if I add the show() in it won’t fade properly.

Thanks in advance for your help. Fiddle link: http://jsfiddle.net/gxfBD/33/

EDIT:
It seems not even professionals get it right: http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-filterable-portfolio-with-jquery/. Theirs jumps about and shows items briefly that aren’t supposed to be shown, too. :/

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

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);
    }
}

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.

Hope that helps someone else.

Answer 1

Try this: http://jsfiddle.net/gxfBD/74/

I gave your <UL> an ID and changed the JS to this:

$(document).ready(function() {
    $(".filter").click( function () {
        var filterText = $(this).attr('href').replace('#','');
        $("#ulid").hide(); //hide the whole div
        $("li").show(); //remove the filter so everything shows
        $("li").not('.'+filterText).hide(); //apply the new filter
        $("#ulid").fadeIn(1000); //fade in the div
    });
});

Note that if you want more control over the fadeOut() effect, you can do the filtering within a callback, like so:

$(document).ready(function() {
    $(".filter").click( function () {
        var filterText = $(this).attr('href').replace('#','');
        $("#ulid").fadeOut(1000,
                           function(){
                             $("li").show();
                             $("li").not('.'+filterText).hide();
                           }
                      );
        $("#ulid").fadeIn(1000);
    });
});

If that isn’t what you’re looking for, then you’ll need to be more clear about what you are looking for.