Question

我有一个关于我可以在div中对多个元素执行回调的方式的问题。

所以在这里。我有一个div包含两列（ col1 和 col2 ，两者都占父级div的50％和 float：左）很多项目显示为图像。大项目比小项目大两倍（高度）。创建的配置可以正确显示项目以填充div而不留空白部分。所以，基本上，如果我们有3个项目，我们在col1中获得一个大项目，在col2中获得2个小项目。有4个项目，我们在col1中得到一个小+大，在col2中得到一个大+小。等等。

问题是，当我过滤不同的项目时（在这个例子中，通过显示仅用JS制作的项目，我使用show（）和hide（）可以正常工作）。如果是动画，项目就会消失，因为hide（）似乎在show（）尚未完成时被调用。然后我被告知有关回调功能，但它似乎仅适用于一个元素，而不是倍数。这不是最佳的，因为我的过滤总是显示多个项目。我想知道如何正确执行该函数，因此它适用于所有项目，因为它似乎只适用于一个。

提前致谢。

<script>
function update_projects(projects_ids){
  console.log("Update projects : " + projects_ids);

  var projects_top = $('.projects').offset().top;
  if ($(window).scrollTop() > projects_top) {
      $(window).scrollTop(projects_top);
  }

  var projects_config = generate_configuration(projects_ids.length);
  var project_index = 0;


        //$('.project').show();
  $('.project').slideUp(2000, function(){

    var odd = false;
    for (var i = 0; i < projects_config.col1.length; ++i) {
        var block_type = projects_config.col1[i];
        var project_id = projects_ids[project_index++];

        var odd_selector = '';
        if (block_type == 'small') {
        if (odd == false) {
            odd_selector = '.left';
        } else {
            odd_selector = '.right';
        }
        odd = !odd;
        }
        $('.col1 .project_' + project_id + '.' + block_type + odd_selector).show();
    }

            odd = false;
    for (var i = 0; i < projects_config.col2.length; ++i) {
        var block_type = projects_config.col2[i];
        var project_id = projects_ids[project_index++];

        var odd_selector = '';
        if (block_type == 'small') {
        if (odd == false) {
            odd_selector = '.left';
        } else {
            odd_selector = '.right';
        }
        odd = !odd;
        }
        $('.col2 .project_' + project_id + '.' + block_type + odd_selector).show();
    }
  });
  resize();
}

Answer 1

正如您所发现的，动画的完成回调每个元素调用一次，而不是每个元素调用一次。

要在所有动画完成时调用回调，请在集合上使用.promise()方法：

$('.myClass').slideUp(2000).promise().then(function() {
    // not called until all animations have finished
    ...
});

对多个元素执行回调函数

1 个答案: