Javascript animate content In and hide

Question

I want to animate whole bunch of cards in with javascript and hide them when they press a button a data filter. what would be the best way in doing this?

I was thinking of using hide() and show() but zooms the content out and looks bad, I would like to do more of a sorting fade in and out but want to clear the grid and fade items in nicely.

<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>

JavaScript doesn't have hide and show methods. If you're using jQuery it should be in your tags. Your question is a bit broad. Normally you're required to try something and ask about your code. — isherwood
– isherwood, Commented Nov 30, 2017 at 17:07

ProEvilz · Accepted Answer · 2017-11-30 17:28:37Z

I think this is what you're after?

This assumes each card is a type of category like your filter buttons.

Notice the new data-type added to the cards and the typo on theatre.

To achieve the fade effect, we use jQuery's fadeOut() and fadeIn() methods. You can view more information about jQuery effects here.

//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>

Carl Edwards · Accepted Answer · 2017-11-30 17:44:11Z

You'll wanna apply the data attributes set on your buttons to the corresponding card and from there just query the card based on its' value:

$(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>

Collectives™ on Stack Overflow

Javascript animate content In and hide

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related