已过滤的列表：淡出当前已过滤列表并在应用新过滤器的同一列表中淡入淡出

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