Question

Hi I am currently doing a project that requires me to sort and filter products on a page using jQuery. I have my script working perfectly showing and hiding results based on the user selection however I want the animations between transitions to run differently. I have them set already using fadeOut and fadeIn. But was wanting to make use of the .effects feature of jQuery. I’m not sure where I’m going wrong or if I can even use it. See my code below. Heres my full script using fade.

 $(document).ready(function() {
$('ul#filter a').click(function() {
    $(this).css('outline','none');
    $('ul#filter .current').removeClass('current');
    $(this).parent().addClass('current');

    var filterVal = $(this).text().toLowerCase().replace(' ','-');

    if(filterVal == 'all') {
        $('ul#selection li.hidden').fadeIn('slow').removeClass('hidden');
    } else {

        $('ul#selection li').each(function() {
            if(!$(this).hasClass(filterVal)) {
                $(this).fadeOut('slow').addClass('hidden');
            } else {
                $(this).fadeIn('slow').removeClass('hidden');
            }
        });
    }

    return false;
});

});

Below is my attempt at using the effect with fold.

 $('ul#selection li').each(function() {
        if(!$(this).hasClass(filterVal)) {
            $(this).effect('fold','slow').addClass('hidden');
        } else {
            $(this).fadeIn('slow').removeClass('hidden');
        }
    });
}

Can someone point out where I’m going wrong?

Answer 1

1. Make sure you are including jQuery UI
2. Try this: $(this).effect('fold','slow', function(e) { $(this).addClass('hidden'); })

If you just chain .addClass() directly after the .effect(), it will happen immediately, rather than when the effect is complete. Therefore, if your .hidden class actually hides things with CSS, they will seem to disappear right away, before you notice the fold effect. So .addClass() should be a callback to .effect() instead.