可过滤的jquery组合

Question

我正在使用此article

中的javascript

HTML

类别导航

<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> 

组合

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

}）;

我希望过渡是即时的，没有任何动画。我怎么能这样做？

Answer 1

移除fadeIn()并将其替换为show()并移除fadeOut()并将其替换为hide()。

fadeIn文档：http://api.jquery.com/fadeIn/

show文档：http://api.jquery.com/show/

fadeOut文档：http://api.jquery.com/fadeOut/

hide文档：http://api.jquery.com/hide/

所以这是经过调整的代码：

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