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

A. L · Accepted Answer · 2017-04-12 04:01:10Z

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

answered Apr 12, 2017 at 4:01

A. L

12.7k29 gold badges100 silver badges179 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jiroscopes Over a year ago

Won't this keep the columns there but just not visible. It would take up space still correct?

A. L Over a year ago

if you're using jquery, may as well just use hide() function

Alfin Paul · Accepted Answer · 2017-04-12 04:06:33Z

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>

The blocks still take up space though even when not visible. Is there any way to make them go away, columns and all, and then reappear?
put height:0 when add class .hide .hide { height:0; opacity:0; }

Ashraful Karim Miraz · Accepted Answer · 2017-04-12 04:51:13Z

0

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

answered Apr 12, 2017 at 4:51

Ashraful Karim Miraz

7255 silver badges8 bronze badges

Comments

Ankur Agarwal · Accepted Answer · 2017-04-12 05:23:01Z

0

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

answered Apr 12, 2017 at 5:23

Ankur Agarwal

2861 silver badge5 bronze badges

Collectives™ on Stack Overflow

CSS not animating with Jquery Add/Remove Class

4 Answers 4

2 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related