JQuery изотопа является не анимировать

Question

Я использую Изотоп фильтрации с масонством на этом сайте:

http://ihavepinkhair.com/wp/blog/

Фильтр работает отлично и одушевляет после первого фильтра просто отлично, но я подробности человек, и я не могу понять, что первый фильтр не оживляет должным образом.

Моего app.js выглядит следующим образом:

jQuery(document).ready(function($) { 

// init Masonry 
var $gridMason = $('.grid-mason').masonry({ 
    // options 
    itemSelector: '.grid-item', 
    columnWidth: '.grid-sizer', 
    percentPosition: true, 
    transitionDuration: '0.8s' 
}); 

// layout Masonry after each image loads 
$gridMason.imagesLoaded().progress(function() { 
    $gridMason.masonry('layout'); 
}); 

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

}); 

я упускаю что-то?

Спасибо, Джаред

Answer 1

Кладка и Изотоп отдельные скрипты и не используются вместе. Изотоп имеет макетный макет, который не является masonry.js, и он может фильтровать и сортировать, в то время как masonry.js не может фильтровать или сортировать. Сначала вы инициализируете свои объекты masonry.js, а затем пытаетесь фильтровать с помощью isotope.js, который загружается только после нажатия первой кнопки фильтра. Избавьтесь от masonry.js и используйте только isotope.js.

jQuery(document).ready(function($) { 

// init Masonry 
var $gridMason = $('.grid-mason').isotope({ 
// options 
itemSelector: '.grid-item', 
masonry: { 
columnWidth: '.grid-sizer' 
}, 
percentPosition: true, 
transitionDuration: '0.8s' 
}); 

// layout Masonry after each image loads 
$gridMason.imagesLoaded().progress(function() { 
$gridMason.isotope('layout'); 
}); 

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

});