Isotope filter animation not working on first click

Question

I am learning HTML5/CSS, and while my isotope filtering works almost perfectly, there is a small bug.

"All" is set by default, and when I click on any of the other options, while they are filtered properly, the animation does not trigger. After that, everything animates just fine, it is just the first click that is the issue.

Any help or ideas would be greatly appreciated.

Here is the relevant HTML and css:

  <div class="container-fluid filterable-portfolio">
        <div class="row">
           <div class="col-md-12">
              <ul class="nav nav-pills portfolio filter">
                 <li class="portfolio-title">Filter by:</li>
                 <li role="presentation" class="active"><a href="#" data-filter="*">All</a></li>
                 <li role="presentation"><a href="#"data-filter=".school">School Projects</a></li>
                 <li role="presentation"><a href="#"data-filter=".personal">Personal Projects</a></li>
                 <li role="presentation"><a href="#"data-filter=".unity">Unity Projects</a></li>
              </ul>
           </div>
        </div>
        <div class="row portfolio-items">
           <figure class="portfolio-item col-sm-4 school">
              <a href="#">
              <img src="http://placekitten.com/700/400" class="img-responsive">
              </a> /* this bit of code has several more instances, but i cut them to save space for asking this question */

and here is the css:

.portfolio-title {
padding: 10px 15px 10px 0;
font-weight: bold;
}

.nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus {
background: none;
color: #000000;
}

.nav-pills > li.active > a{
color: #000000 !important;
background-color:#f5f5f5 !important;
}

.nav-pills a{
color: #000000;
margin-bottom: 1rem;
}

.nav>li>a:hover, .nav>li>a:focus {
background: none;
color: #000000;
}

.portfolio-item {
margin-bottom: 1rem;
}

.portfolio-item img {
-webkit-filter:grayscale(100%);
filter:grayscale(100%);
border-radius:6px;
}

.portfolio-item:hover img {
-webkit-filter: grayscale(50%);
filter: grayscale(50%);
}

.filterable-portfolio{
margin-bottom: 3rem;
}
.portfolio-item img{    
width :100%;    
}

here is the js:

// init Isotope
var $container = $('.portfolio-items').isotope('layout');

// filter items on button click
$('.portfolio.filter').on( 'click', 'a', function(e) {
e.preventDefault();
var filterValue = $(this).attr('data-filter');
$container.isotope({ filter: filterValue });

//$('.portfolio-filter li').removeClass('active');
//$(this).closest('li').addClass('active');
});

Answer 1

This Code is working fine for me.

var $portfolio_filter = $('.portfolio-items').isotope();    
$grid_selectors = $('.portfolio.filter > li > a');
$grid_selectors.on('click', function () {
    $grid_selectors.parent().removeClass('active');
    $(this).parent().addClass('active');
    var selector = $(this).attr('data-filter');
    $portfolio_filter.isotope({filter: selector}).isotope( 'reloadItems' ).isotope();
    return false;
});