动画显示/隐藏从CSS类

首先，你可以使用not选择器(看这里!)来避免隐藏所有照片。只需为带有照片的块分配两个类。像这样

    <div class="portfolio-items wedding"></div>
    <div class="portfolio-items family"></div>
    <div class="portfolio-items kids"></div>

然后你可以这样重写portfolioItems函数

    function portfolioItems(filter) {
        $(".portfolio-items:not(."+filter+")").hide();
    }

其次，您可以创建一个通用函数来隐藏某些类别，但不要多次重复相同的代码。

你可以试试:

function portfolioItems(filter) {
   $(".portfolio-items.not("+filter+")").fadeOut();
   $("."+filter).fadeIn(); 
}

这是我发现的一种通过CSS进行过滤的有用方法。我喜欢在链接上使用data属性来指定过滤器。首先，设置一个带有一些链接的导航和一个带有一些图像或div的作品集:

<!-- set up some navigation -->
<nav>
    <a href="#" class="filter">All Photos</a>
    <a href="#" class="filter" data-filter=".family">Family Photos</a>
    <a href="#" class="filter" data-filter=".art">Art Photos</a>
    <a href="#" class="filter" data-filter=".wombats">Wombat Photos</a>
</nav>
<!-- set up a portfolio -->
<div class="portfolio">
    <div class="family item">Some family image or something</div>
    <div class="art item"> Some art image or something</div>
    <div class="wombats item">Some wombat image or something</div>
    <div class="wombats item">Some wombat image or something</div>
    <div class="art item"> Some art image or something</div>
</div>

注意每个a标记都有您想要用作过滤器的类名作为数据过滤器属性。你可以在这里指定多个类，它会一样工作。例如"袋熊"。family"会让你在作品集中使用DOUBLE过滤器。

下面的脚本将帮助您设置过滤器:

//on document ready
$(document).ready(function(){
  //when you click <a> tag in the <nav>
  $("nav a").click(function(e){
    //if the <a> has a data-filter attribute
    if($(this).attr("data-filter")){
         //show all the .items with the class in the data-filter attribute
         $(".portfolio .item"+$(this).attr("data-filter")).show(300);
         //hide all the .items that do not have that class
         $(".portfolio .item:not("+$(this).attr("data-filter")+")").hide(300);
    }else{
      //if there's no data-filter attribute, show all the images
      $(".portfolio .item").show(300);
    }
  });
});

对于这个示例，我只是在show()和hide()函数中使用时间，但是fadeIn() fadeOut()可能也适用于您。

为了启用"all"过滤器，我只是没有为特定的a标签编写数据过滤器属性，并确保JS知道该做什么(检查if/else)。

要记住的重要事情是在投资组合项目上使用的类和数据过滤器属性之间的链接。一开始很简单，不过我相信在你完成之前它会变得有点复杂:)

这里有一个jsfiddle来玩:http://jsfiddle.net/w4VWm/

祝你好运!

隐藏所有，将新的类名添加到过滤器字符串中，然后通过过滤器字符串

var filters = "";
function portfolioItems(filter) {
    filters += '.' + filter
    $(".portfolio-items").hide();
    $(filters).show();
    $("#filter").text(filters)
}
function initEventHandlers() {
    $(".port-all").click(function () {
        filters = "";
        $(".portfolio-items").show();
        return false;
    })
    // the rest is the same
}

不确定你想要什么样的过渡，但这将实现淡入/淡出只用很少的jquery:

请注意，你也许可以删除div中的一些东西，但我不知道你需要在页面上的其他东西

小提琴:http://jsfiddle.net/Z5uXP/

    <div class="portfolio-container">
        <div class="portfolio-links">
            <a href="#" data-type="all"><img alt="All" class="port-all" src="images/port-all.png" /></a>
            <a href="#" data-type="family"><img alt="family" class="port-family" src="images/port-family.png" /></a>
            <a href="#" data-type="wedding"><img alt="wedding" class="port-wedding" src="images/port-wedding.png" /></a>
            <a href="#" data-type="couples"><img alt="couples" class="port-couples" src="images/port-couples.png" /></a>
            <a href="#" data-type="kids"><img alt="kids" class="port-kids" src="images/port-kids.png" /></a>
        </div>
        <div class="portfolio">
            <div class="portfolio-items wedding couples family"></div>
            <div class="portfolio-items kids"></div>
            <div class="portfolio-items wedding kids family"></div>
            <div class="portfolio-items couples"></div>
            <div class="portfolio-items couples kids family"></div>
            <div class="portfolio-items wedding"></div>
        </div>
    </div>
    <script>
     $(document).ready(function(){
  var $container = $("div.portfolio-container"),
      $portfolio = $container.find("div.portfolio");
 $container
 .on("click", ".portfolio-links a", function(event){
   var $obj = $(this);
  event.preventDefault();
  $portfolio
   .fadeOut()
  .queue(function(next){
    $($(this)[0]).css("color", "red")
     .removeClass("family wedding couples kids")
     .addClass($($obj[0]).data("type"));
    next();
  })
   .fadeIn();
 });
 });
</script>
<style>
 .portfolio .portfolio-items{
  display: none;
 }
 .portfolio.all .portfolio-items,
 .portfolio.family .portfolio-items.family,
 .portfolio.wedding .portfolio-items.wedding,
 .portfolio.couples .portfolio-items.couples,
 .portfolio.kids .portfolio-items.kids{
  display: block;
 }
</style>