CSS not animating with Jquery Add/Remove Class

Question

Ok so I have a portfolio I am trying to sort. When you click one of the links in the nav it will sort the images based on their assigned ID. I have the JQuery function working, but it won't animate. Also the container holding the images won't animate either, it's like all CSS animations are turned off...I am using bootstrap as well.

I was trying to build this for fun basically, I have run into a snag with the CSS not animating the class. I have starred at this for ages, it is probably simple but I am not seeing it.

CSS:

.category-item{
display: block;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
.hide{
display: none;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}

JQUERY:

$(document).ready(function(){
// Portfolio Sort
$(".categorys").click(function(){
  var category = $(this).attr('id');
  //alert(category); //test nav
  if (category == "featured") {
      $(".category-item").addClass("hide");
      setTimeout(function(){
        $(".category-item").removeClass("hide");
    }, 300);
  }
 })
});

here is the demo JSFiddle (no images, but basically it should animate disappearing and coming back.)

Answer 1

display: none is not part of the animatable list. Use opacity: 0 instead.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

Answer 2

display show and display none not working in css animations

Try this code

 $(document).ready(function(){ // Portfolio Sort $(".categorys").click(function(){ var category = $(this).attr('id'); //alert(category); //test nav if (category == "featured") { $(".category-item").addClass("hide"); setTimeout(function(){ $(".category-item").removeClass("hide"); }, 300); } }) }); 

 /*Portfolio Start*/ .portfolio{ height: 1000px; transition: all 1s ease; } .portfolio-head{ font-family: 'Lato', sans-serif; font-size: 2.5em; font-style: italic; text-align: center; } .portfolio-nav-holder{ width: 600px; height: 20px; margin: 0 auto; } .portfolio-nav{ color: black; list-style: none; text-align: center; width: 450px; height: 100%; margin: 0 auto; } .portfolio-nav a{ text-decoration: none; float: left; margin-right: 15px; color: black; } .portfolio-nav a:hover{ color: #f7c845; transition: all 0.2s ease; } .portfolio-row{ padding-top: 80px; } .portfolio-img{ position: relative; } .portfolio-img > img{ width: 100%; height: 100%; background-color:red; } .portfolio-overlay{ background-color: #f7c845; z-index: 100; position: absolute; height: 100%; width: 100%; display: none; } .portfolio-overlay > h3 { text-align: center; color: #212121; font-size: 2em; font-weight: 700; padding-top: 80px; } .portfolio-overlay > p { text-align: center; color: #212121; padding: 20px 40px; } .portfolio-row-2{ padding-top: 20px; } .container{ transition: all 2s ease !important; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; } .category-item{ opacity:1; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; } .hide{ opacity: 0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="row"> <div class="col-md-12"> <h2 class="portfolio-head">PORTFOLIO</h2> <div class="portfolio-nav-holder"> <ul class="portfolio-nav"> <li><a class="categorys" id="featured">Featured</a></li> </ul> </div> </div> </div> <div class="row portfolio-row"> <div class="col-md-4 col-sm-4 col-xs-4 category-item"> <div class="portfolio-img"> <div class="portfolio-overlay"> <h3>Project #1</h3> <p>This is the home of my first project. I made this thing.</p> </div> <img src="assets/images/port_1.jpg" alt="portfolio-image"> </div> </div> <div class="col-md-4 col-sm-4 col-xs-4 category-item featured"> <div class="portfolio-img"> <div class="portfolio-overlay"> <h3>Project #2</h3> <p>This is the home of my first project. I made this thing.</p> </div> <img src="assets/images/port_2.jpg" alt="portfolio-image"> </div> </div> <div class="col-md-4 col-sm-4 col-xs-4 category-item featured"> <div class="portfolio-img"> <div class="portfolio-overlay"> <h3>Project #3</h3> <p>This is the home of my first project. I made this thing.</p> </div> <img src="assets/images/port_3.jpg" alt="portfolio-image"> </div> </div> </div> <div class="row portfolio-row-2"> <div class="col-md-4 col-sm-4 col-xs-4 category-item featured"> <div class="portfolio-img"> <div class="portfolio-overlay"> <h3>Project #4</h3> <p>This is the home of my first project. I made this thing.</p> </div> <img src="assets/images/port_4.jpg" alt="portfolio-image"> </div> </div> <div class="col-md-4 col-sm-4 col-xs-4 category-item featured"> <div class="portfolio-img"> <div class="portfolio-overlay"> <h3>Project #5</h3> <p>This is the home of my first project. I made this thing.</p> </div> <img src="assets/images/port_5.jpg" alt="portfolio-image"> </div> </div> <div class="col-md-4 col-sm-4 col-xs-4 category-item featured"> <div class="portfolio-img"> <div class="portfolio-overlay"> <h3>Project #6</h3> <p>This is the home of my first project. I made this thing.</p> </div> <img src="assets/images/port_6.jpg" alt="portfolio-image"> </div> </div> </div> </div> 

Answer 3

The css "display" property is not works in animation. So try this css code,

 .category-item{ opacity: 1; visibility: visible; max-height: 100%; display: block; overflow: hidden; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; } .hide{ opacity: 0; max-height: 0; visibility: hidden; } 

Answer 4

Since CSS transitions don't work on display property here is a pure jquery solution that could do the thing for you.

Please remove the transitions from your css and alter your function something like this.

$(document).ready(function(){
  // Portfolio Sort
  $(".categorys").click(function(){
      var category = $(this).attr('id');
      //alert(category); //test nav
      if (category == "featured") {
          $(".category-item").hide(500);
          setTimeout(function(){
            $(".category-item").show(500);
        }, 3000);
      }
  })
});

You may alter the timeout and show hide delay as per your need.

Here is a working fiddle. https://jsfiddle.net/nhdo3opo/5/

Hope this helps

---