如何正确地对具有不同元素的jQuery事件进行排队

Question

我有一个使用jQuery同位素插件设置的照片网格。当点击图像时，该人的div被展开，他们的生物信息被显示，同位素被调用来更新布局。

第一次效果很好，但当点击第二张图像时，我会对动画产生橡皮筋效果，因为它似乎试图以错误的顺序设置动画/重新塑造形状。我想是因为我没有把东西排好队？

var $people = $('.leadership').isotope({
itemSelector: '.person',
layoutMode: 'fitRows',
getSortData: {
name: '.name',
category: '[data-category]'
},
});
$(".person .photo").click(function(){
$(".person").removeClass('active');
$(this).parent().addClass('active');
var target = $(this).parent();
$people.isotope().on( 'layoutComplete', function(){
console.log(target.offset().top);
$('html,body').animate({
scrollTop: target.offset().top-170
}, 1000);
} );
});

行动中的开发链接

Answer 1

单击处理程序只应在右侧元素上添加active类。这是瞬间的。

现在在layoutComplete上，它是稍后发生的事件。。。布局和所有定位转换完成后，只需使用active类来"定位"正确的元素并为scrollTop设置动画。

var $people = $('.leadership').isotope({
itemSelector: '.person',
layoutMode: 'fitRows',
getSortData: {
name: '.name',
category: '[data-category]'
}
}).on('layoutComplete', function(){
var target = $(".active");
console.log(target.offset().top);
$('html,body').animate({
scrollTop: target.offset().top-170
}, 1000);
});
$(".person .photo").click(function(){
$(".person").removeClass('active');
$(this).parent().addClass('active');
$people.isotope("layout");
});