對多個元素執行回調函數

Question

我對在div中對多個元素執行回調的方式有疑問。

就是這樣 我有一個div，其中包含兩列（ col1和col2 ，兩者都占父div的50％，並且在float：left上 ）顯示為圖像的許多項目。 大型項目的規模（高度）是小型項目的兩倍。 創建的配置可以正確顯示項目以填充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
    ...
});