gefilterte Listen: Ausblenden der aktuell gefilterten Liste und Einblenden derselben Liste mit neuem Filter

Question

Ich habe versucht, eine Art rudimentärer Filter zu erhalten. Grundsätzlich klicken Sie auf einen Link und es filtert die Liste (siehe Code unten). Das funktioniert tatsächlich gut. Allerdings würde ich es gerne etwas aufwerten, indem ich die aktuelle Liste ausbleiche (ob gefiltert oder nicht) und die Liste mit dem richtigen Filter wieder einblenden lasse.

Ich hoffe, Sie bekommen, was ich meine. Lass es mich wissen, wenn ich keinen Sinn habe.

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

Ich habe die üblichen fadeOut() und fadeIn() erneut versucht, aber der Filter scheint auf die bereits gefilterte Liste anzuwenden und nichts kommt zurück. Dies ist, warum ich die erste show() in dieser Zeile habe: $("li").show().not('.'+filterText).hide();, denn das scheint die Liste zurückzusetzen. Aber wenn ich die Show() hinzufügen, wird es nicht richtig verblassen.

Vielen Dank im Voraus für Ihre Hilfe. Fiddle Link: http://jsfiddle.net/gxfBD/33/

EDIT: Es scheint nicht einmal Profis es richtig: http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-filterable-portfolio-with-jquery/. Sie springen herum und zeigen kurz Gegenstände, die auch nicht gezeigt werden sollen. :/

Erneut bearbeiten (ALTERNATIVE ANTWORT): Marcs Antwort gab mir unter dem Kick-Start musste ich es erarbeiten. meine neue jQuery ist unten:

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

Ich habe auch das colorbox Plugin kombiniert und den Anruf zu meinem Click-Ereignisse hinzugefügt. Dadurch kann der Text "Bild x von y" mit der neuen gefilterten Anzahl von Bildern in der Liste festgelegt werden.

Hoffe, dass jemand anderes hilft.

Answer 1

Try this: http://jsfiddle.net/gxfBD/74/

ich Ihre <UL> eine ID hat und dies änderte sich die 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 
    }); 
}); 

Beachten Sie, dass, wenn Sie mehr Kontrolle über die fadeOut() Effekt wollen, können Sie die Filterung in einem cal tun können lback, etwa so:

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

Wenn das nicht ist, was Sie suchen, dann müssen Sie mehr darüber im Klaren sein, was Sie suchen.

Answer 2

Haben Sie versucht, Übergangszeiten in Ihrer Haut setzen() und show(), wie dies mit dem 1000 Millisekunden verblassen:

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