如何正确排队 jQuery 具有不同元素的事件？

Question

我使用 jQuery 同位素插件设置了照片网格。单击图像时，此人的 div 会展开，他们的生物会显示出来，并且会调用 Isotope 来更新布局。

第一次效果很好，但是当我点击第二张图片时，我对动画产生了橡皮筋效果，因为它似乎试图按错误的顺序 animate/re-shape。我认为这是因为我没有正确排队？

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

});

dev link in action

Answer 1

点击处理程序只应在右侧元素上添加 active class。那是瞬时的。

现在layoutComplete，这是稍后发生的事件...在布局和所有定位转换完成后，只需使用active class 到"target" 正确的元素并为 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");
});

如何正确排队 jQuery 具有不同元素的事件？

How to properly queue jQuery events with different elements?

jquery

jquery-animate

jquery-isotope