光滑的可過濾產品組合

我正在嘗試使用這種可過濾的產品組合，但對於我的需求而言，過渡並不夠流暢。光滑的可過濾產品組合

var Portfolio = { 
sort: function(items) { 
    items.show(); 
    $('#portfolio-content').find('div.portfolio-item').not(items).fadeOut(500); 
}, 
showAll: function(items) { 
    items.fadeIn(500); 
}, 
doSort: function() { 
    $('a', '#portfolio-sort').on('click', function() { 

     var $a = $(this); 
     if (!$a.is('#all')) { 

      var items = $('div[data-cat=' + $a.data('cat') + ']', '#portfolio-content'); 

      Portfolio.sort(items); 

     } else { 

      Portfolio.showAll($('div.portfolio-item', '#portfolio-content')); 


     } 

    }); 
} 
}; 

Portfolio.doSort();

HTML

<div id="portfolio"> 
<div id="portfolio-sort"> 
    <a href="#" id="all">ALL</a> 
    <a href="#" data-cat="a">A</a> 
    <a href="#" data-cat="b">B</a> 
    <a href="#" data-cat="c">C</a> 
</div> 
<div id="portfolio-content"> 
    <div class="portfolio-item" data-cat="a">A</div> 
    <div class="portfolio-item" data-cat="b">B</div> 
    <div class="portfolio-item" data-cat="c">C</div> 
    <div class="portfolio-item" data-cat="c">C</div> 
    <div class="portfolio-item" data-cat="b">B</div> 
    <div class="portfolio-item" data-cat="a">A</div> 
    <div class="portfolio-item" data-cat="a">A</div> 
    <div class="portfolio-item" data-cat="c">C</div> 
    <div class="portfolio-item" data-cat="b">B</div> 
</div>

CSS

#portfolio { 
    width: 100%; 
    max-width: 600px; 
    margin: 2em auto; 
} 

#portfolio-sort { 
    text-align: center; 
    padding-bottom: 3px; 
    border-bottom: 1px solid #999; 
    margin-bottom: 1em; 
} 

#portfolio-sort a { 
    color: #fff; 
    background: #a00; 
    display: inline-block; 
    padding: 3px 9px; 
    text-decoration: none; 
    margin-right: 1em; 
} 

#portfolio-content { 
    overflow: hidden; 
} 

div.portfolio-item { 
    float: left; 
    margin: 0 3% 1em 0; 
    width: 29%; 
    height: 10em; 
    line-height: 10; 
    text-align: center; 
} 

div[data-cat="a"] { 
    background: #ccc; 
} 

div[data-cat="b"] { 
    background: #666; 
    color: #fff; 
} 

div[data-cat="c"] { 
    background: #333; 
    color: #fff; 
}

有沒有一種方法，使使用CSS3或jQuery的過濾更順暢？

下面是完整的代碼：http://jsfiddle.net/gabrieleromanato/KkxyS/

來源

2013-08-25 Daniel

如果你願意添加另一個庫到你的項目[Isotope]（http://isotope.metafizzy.co/index.html）可能是有趣的：[Demo Fiddle]（http://jsfiddle.net/ KkxyS/55 /） – dc5

我想使用顯示腳本的原因之一是，您不需要任何額外的庫。 – Daniel

我已經做了一些更改您的JS：

var Portfolio = { 
    sort: function (items) { 
     Portfolio.hideAll($('#portfolio-content *')); 
     Portfolio.showAll(items); 
    }, 
    showAll: function (items) { 
     items.fadeIn(700); 
    }, 
    hideAll: function (items) { 
     items.hide(); 
    }, 
    doSort: function() { 
     $('a', '#portfolio-sort').on('click', function() { 
      var $a = $(this); 
      if (!$a.is('#all')) { 
       var items = $('div[data-cat=' + $a.data('cat') + ']', '#portfolio-content'); 
       Portfolio.sort(items); 
      } else { 
       var items = $('#portfolio-content *'); 
       Portfolio.hideAll(items); 
       Portfolio.showAll(items); 
      } 
     }); 
    } 
}; 

Portfolio.doSort();

而且，這裏是的jsfiddle：http://jsfiddle.net/KkxyS/56/

希望，它爲你的作品。

來源

2013-08-25 08:25:10

光滑的可過濾產品組合

回答

相關問題