jQuery Isotop erste Filter sind Animieren nicht

Question

Ich bin mit Isotopen-Filterung mit Mauerwerk auf dieser Seite:

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

Der Filter funktioniert gut und es belebt nach dem ersten Filter ganz gut, aber ich bin ein Details Person und ich kann nicht darüber hinwegkommen, dass der erste Filter nicht richtig animiert.

sieht mein app.js wie folgt aus:

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

}); 

bin ich etwas fehlt?

Danke, Jared

Answer 1

Mauerwerk und Isotopen getrennt sind Skripte und nicht zusammen verwendet werden. Isotope hat ein "Mauerwerk" Layout, das nicht maurer.js ist und es kann filtern und sortieren, während Mauerwerk.js nicht filtern oder sortieren kann. Du initialisierst deine Gegenstände zuerst mit maurery.js und versuchst dann mit isotope.js zu filtern, die erst geladen werden, nachdem du auf den ersten Filterknopf geklickt hast. Befreien Sie sich von mauerwerk.js und verwenden Sie nur 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 }); 
}); 

});