Filterable jquery portfolio

Question

I'm using javascript from this article

HTML

Category navigation

<ul id="filter">  
    <li class="current"><a href="#">All</a></li>  
    <li><a href="#">Design</a></li>  
    <li><a href="#">Development</a></li>  
    <li><a href="#">CMS</a></li>  
    <li><a href="#">Integration</a></li>  
    <li><a href="#">Information Architecture</a></li>  
</ul> 

Portfolio

    <ul id="portfolio">  
    <li class="cms integration">  
        <a href="#"><img src="images/a-list-apart.png" alt="" height="115" width="200" />A List Apart</a>  
    </li>  
    <li class="integration design">  
        <a href="#"><img src="images/apple.png" alt="" height="115" width="200" />Apple</a>  
    </li>  
    <li class="design development">  
        <a href="#"><img src="images/cnn.png" alt="" height="115" width="200" />CNN</a>  
    </li>  
    <li class="cms">  
        <a href="#"><img src="images/digg.png" alt="" height="115" width="200" />Digg</a>  
    </li>  
</ul>

jQuery

$(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#portfolio li.hidden').fadeIn('slow').removeClass('hidden');  
    } else {  
        $('ul#portfolio li').each(function() {  
            if(!$(this).hasClass(filterVal)) {  
                $(this).fadeOut('normal').addClass('hidden');  
            } else {  
                $(this).fadeIn('slow').removeClass('hidden');  
            }  
        });  
    }  

    return false;  
});  

});

I would like the transitions to be instant, without any animation. How can I do that?

Answer 1

Remove fadeIn() and replace it with show() and remove fadeOut() and replace it with hide().

fadeIn docs: http://api.jquery.com/fadeIn/

show docs: http://api.jquery.com/show/

fadeOut docs: http://api.jquery.com/fadeOut/

hide docs: http://api.jquery.com/hide/

So here is the adjusted code:

$(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#portfolio li.hidden').show().removeClass('hidden');  
    } else {  
        $('ul#portfolio li').each(function() {  
            if(!$(this).hasClass(filterVal)) {  
                $(this).hide().addClass('hidden');  
            } else {  
                $(this).show().removeClass('hidden');  
            }  
        });  
    }  

    return false;  
});  
});