Question

我有一个使用jQuery Isotope插件设置的照片网格。单击图像后，该人的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);
    } );

});

dev link in action

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

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

1 个答案: