已過濾的列表：淡出當前已過濾列表並在應用新過濾器的同一列表中淡入淡出

Question

我一直在嘗試獲得一種基本的過濾器工作方式。基本上，你點擊一個鏈接，它會過濾列表（見下面的代碼）。這實際上工作正常。不過，我希望通過淡出當前列表（不管是否已過濾）以及使用正確的過濾器將列表重新淡入淡出來。

希望你明白我的意思。如果我沒有任何意義，請告訴我。

HTML：

filter by: <a href="#" class="clearfilter">all</a> 
<h4>venue</h4> 
<a href="#location1" class="filter">location1</a>, <a href="#location2" class="filter">location2</a> 
<h4>photographer</h4> 
<a href="#ben" class="filter">ben</a>, <a href="#ken" class="filter">ken</a>, <a href="#sam" class="filter">sam</a>, <a href="#susan" class="filter">susan</a> 
<br/><br/> 
<ul> 
    <li class="ken location1"><a href="#">img 01</a></li> 
    <li class="ken location1"><a href="#">img 02</a></li> 
    <li class="ken location2"><a href="#">img 03</a></li> 
    <li class="sam location2"><a href="#">img 04</a></li> 
    <li class="sam location2"><a href="#">img 05</a></li> 
    <li class="ben location2"><a href="#">img 06</a></li> 
    <li class="ben location2"><a href="#">img 07</a></li> 
    <li class="ben location2"><a href="#">img 08</a></li> 
    <li class="susan location1"><a href="#">img 09</a></li> 
    <li class="susan location1"><a href="#">img 10</a></li> 
    <li class="susan location2"><a href="#">img 11</a></li> 
    <li class="ken location2"><a href="#">img 12</a></li> 
</ul> 

jQuery的

$(document).ready(function() { 
    $(".filter").click(function() { 
     var filterText = $(this).attr('href').replace('#',''); 
     $("li").show().not('.'+filterText).hide(); 
    }); 

    $(".clearfilter").click(function() { 
     $("li").show(); 
    }); 
}); 

CSS

li { 
    margin-left:20px; 
    margin-bottom:20px; 
    border:1px solid red; 
    width:40px; 
    height:40px; 
    display:block; 
    float:left; 
} 
li a { 
    width:40px; 
    height:40px; 
    display:block; 
}​ 

我再次嘗試了通常的fadeOut（）和fadeIn（），但過濾器似乎應用於已經過濾的列表並且沒有返回。這就是爲什麼我已經在這一行中得到了最初的show()：$("li").show().not('.'+filterText).hide();因爲這似乎重置列表。 但是，如果我添加show（）在它不會正常淡入淡出。

在此先感謝您的幫助。小提琴鏈接：http://jsfiddle.net/gxfBD/33/

編輯： 看來即使不是專業人士得到正確：http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-filterable-portfolio-with-jquery/。他們跳起來，簡單地顯示不應該顯示的項目。 ：/

再編輯（替代答案）： 馬克的回答下面給了我開始我需要解決的啓動。我的新jQuery如下：

var filterText = "all"; 

$(document).ready(function() { 
    $(".filter").click(function() { 
     filterText = $(this).attr('href').replace('#',''); 

     if(filterText == "all") { 
      $("#gallery a").colorbox({rel:'gallery'}); 
     } 
     else { 
      $("#gallery ."+filterText+" a").colorbox({rel:filterText}); 
     } 
     showFilterList(filterText); 
    }); 

    $("#gallery a").colorbox({rel:'gallery'}); 
}); 

function showFilterList(value) { 
    if (value == "all") { 
     $("#gallery").animate({ 
      opacity: 0 
     }, 500, function() { 
      // Animation complete. 
      $("#gallery li").show(); //remove the filter so everything shows 
     }).animate({ 
      opacity: 1 
     }, 500); 
    } 
    else { 
     $("#gallery").animate({ 
      opacity: 0 
     }, 500, function() { 
      // Animation complete. 
      $("#gallery li").show(); //remove the filter so everything shows 
      $("#gallery li").not('.'+value).hide(); //apply the new filter 
     }).animate({ 
      opacity: 1 
     }, 500); 
    } 
} 

我也組合了colorbox插件，並添加了對我的點擊事件的調用。這允許使用列表中新的過濾數量的圖像來設置「y的圖像x」文本。

希望能幫助別人。

Answer 1

試試這個：http://jsfiddle.net/gxfBD/74/

我給你<UL> ID和改變了JS這樣：

$(document).ready(function() { 
    $(".filter").click(function() { 
     var filterText = $(this).attr('href').replace('#',''); 
     $("#ulid").hide(); //hide the whole div 
     $("li").show(); //remove the filter so everything shows 
     $("li").not('.'+filterText).hide(); //apply the new filter 
     $("#ulid").fadeIn(1000); //fade in the div 
    }); 
}); 

需要注意的是，如果你想在​​效果更多的控制，你可以在CAL中做過濾lback，像這樣：

$(document).ready(function() { 
    $(".filter").click(function() { 
     var filterText = $(this).attr('href').replace('#',''); 
     $("#ulid").fadeOut(1000, 
          function(){ 
          $("li").show(); 
          $("li").not('.'+filterText).hide(); 
          } 
        ); 
     $("#ulid").fadeIn(1000); 
    }); 
}); 

如果這是不是你要找什麼，那麼你就需要爲你所期待的更加清晰。

Answer 2

你有沒有試圖把過渡時間在你的hide（）和show（），像這樣與1000毫秒褪色：

$(document).ready(function() { 
    $(".filter").click(function() { 
     var filterText = $(this).attr('href').replace('#',''); 
     $("li").show(1000).not('.'+filterText).hide(1000); 
    }); 

    $(".clearfilter").click(function() { 
     $("li").show(1000); 
    }); 
});