Javascript animieren Inhalt In und verstecken

Question

Ich möchte ganze Reihe von Karten mit Javascript animieren und sie ausblenden, wenn sie eine Taste einen Datenfilter drücken. Was wäre der beste Weg, dies zu tun?

Ich dachte an die Verwendung von hide() und show() aber zoomt den Inhalt aus und sieht schlecht aus, ich möchte mehr von einer Sortierung Fade in und out, aber das Raster löschen und Elemente in schön ausblenden möchten.

<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="button-group"> 
 
    <button class="button category-button" data-filter="all" type="button"> 
 
     All 
 
    </button> 
 
    <button class="button category-button" data-filter="attraction" type="button"> 
 
     attraction 
 
    </button> 
 
    <button class="button category-button" data-filter="bar-pub" type="button"> 
 
     bar-pub 
 
    </button> 
 
    <button class="button category-button" data-filter="theater" type="button"> 
 
     theater 
 
    </button> 
 
</div> 
 

 

 
<div class="grid-container"> 
 
    <div class="grid-x grid-padding-x small-up-2 medium-up-3"> 
 
    <div class="cell"> 
 
     <div class="card"> 
 
     <img src="assets/img/generic/rectangle-1.jpg"> 
 
     <div class="card-section"> 
 
     <h4>This is a row of cards.</h4> 
 
      <p>This row of cards is embedded in an X-Y Block Grid.</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="cell"> 
 
     <div class="card"> 
 
     <img src="assets/img/generic/rectangle-1.jpg"> 
 
     <div class="card-section"> 
 
      <h4>This is a card.</h4> 
 
      <p>It has an easy to override visual style, and is appropriately subdued.</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="cell"> 
 
     <div class="card"> 
 
     <img src="assets/img/generic/rectangle-1.jpg"> 
 
     <div class="card-section"> 
 
      <h4>This is a card.</h4> 
 
      <p>It has an easy to override visual style, and is appropriately subdued.</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

ich denke, das ist das, was nach der du bist?

Das setzt voraus, dass jede Karte eine type der Kategorie wie Ihre Filtertasten ist.

Beachten Sie, dass die neuen Karten data-type und der Tippfehler theatre hinzugefügt wurden.

Um den Fade-Effekt zu erreichen, verwenden wir die Methoden fadeOut() und fadeIn() von jQuery. Sie können weitere Informationen zu jQuery effects here anzeigen.

//when a button is clicked 
 
$('.button-group button').on('click', function(){ 
 

 
    //store the category of the clicked button 
 
    var category = $(this).attr('data-filter'); 
 
    
 
    //Loop through all `.card` elements 
 
    $('.card').each(function(){ 
 
    
 
    //If the current card in this loop has the same category as the button and it's not the 'all' button then hide it, otherwise fade all cards back in. 
 
    if($(this).attr('data-type') != category && category != 'all') { 
 
     $(this).fadeOut(); 
 
    } else { 
 
     $(this).fadeIn() 
 
    } 
 
    
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.css" rel="stylesheet"/> 
 

 

 
<div class="button-group"> 
 
    <button class="button category-button" data-filter="all" type="button"> 
 
     All 
 
    </button> 
 
    <button class="button category-button" data-filter="attraction" type="button"> 
 
     attraction 
 
    </button> 
 
    <button class="button category-button" data-filter="bar-pub" type="button"> 
 
     bar-pub 
 
    </button> 
 
    <button class="button category-button" data-filter="theatre" type="button"> 
 
     theater 
 
    </button> 
 
</div> 
 

 

 
<div class="grid-container"> 
 
    <div class="grid-x grid-padding-x small-up-2 medium-up-3"> 
 
    <div class="cell"> 
 
     <div data-type="bar-pub" class="card"> 
 
     <img src="https://placehold.it/100x100"> 
 
     <div class="card-section"> 
 
     <h4>I'm the bar/pub type</h4> 
 
      <p>This row of cards is embedded in an X-Y Block Grid.</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="cell"> 
 
     <div data-type="attraction" class="card"> 
 
     <img src="https://placehold.it/100x100"> 
 
     <div class="card-section"> 
 
      <h4>I'm the attraction type</h4> 
 
      <p>It has an easy to override visual style, and is appropriately subdued.</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="cell"> 
 
     <div data-type="theatre" class="card"> 
 
     <img src="https://placehold.it/100x100"> 
 
     <div class="card-section"> 
 
      <h4>I'm the theatre type</h4> 
 
      <p>It has an easy to override visual style, and is appropriately subdued.</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Sie wollen werden die Daten anwenden Attribute auf Schaltflächen auf der entsprechenden Karte gesetzt und von dort abgefragt werden nur die Karte auf der Grundlage seiner Wert:

$(function() { 
 
    $('.category-button').on('click', function() { 
 
    const filter = this.dataset.filter; 
 
    const $filteredCard = $(`.card[data-filter="${filter}"]`); 
 
    
 
    if (filter === 'all') { 
 
     $('.card').stop().fadeIn(); 
 
    } else { 
 
     $filteredCard.stop().fadeIn(); 
 
     
 
     $('.card').not($filteredCard).stop().fadeOut(); 
 
    } 
 
    }); 
 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="button-group"> 
 
    <button class="button category-button" data-filter="all" type="button"> 
 
     All 
 
    </button> 
 
    <button class="button category-button" data-filter="attraction" type="button"> 
 
     attraction 
 
    </button> 
 
    <button class="button category-button" data-filter="bar-pub" type="button"> 
 
     bar-pub 
 
    </button> 
 
    <button class="button category-button" data-filter="theater" type="button"> 
 
     theater 
 
    </button> 
 
</div> 
 

 

 
<div class="grid-container"> 
 
    <div class="grid-x grid-padding-x small-up-2 medium-up-3"> 
 
    <div class="cell"> 
 
     <div class="card" data-filter="attraction"> 
 
     <img src="assets/img/generic/rectangle-1.jpg"> 
 
     <div class="card-section"> 
 
      <h4>This is a row of cards.</h4> 
 
      <p>This row of cards is embedded in an X-Y Block Grid.</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="cell"> 
 
     <div class="card" data-filter="bar-pub"> 
 
     <img src="assets/img/generic/rectangle-1.jpg"> 
 
     <div class="card-section"> 
 
      <h4>This is a card.</h4> 
 
      <p>It has an easy to override visual style, and is appropriately subdued.</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="cell"> 
 
     <div class="card" data-filter="theater"> 
 
     <img src="assets/img/generic/rectangle-1.jpg"> 
 
     <div class="card-section"> 
 
      <h4>This is a card.</h4> 
 
      <p>It has an easy to override visual style, and is appropriately subdued.</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>