同位素过滤器动画无法在第一次点击

Question

我正在学习HTML5/CSS，虽然我的同位素过滤工作几乎完美，但有一个小错误。

默认设置为“全部”，当我点击任何其他选项时，当它们被正确过滤时，动画不会触发。之后，所有的动画都很好，这只是第一个点击就是问题。

任何帮助或想法将不胜感激。

下面是相关的HTML和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 */ 

这里是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%;  
} 

这里是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

此代码工作正常为了我。

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