Execute a Callback function on multiple elements

Question

I had a question about the way I could execute a callback on multiple elements in my div.

So here it is. I have a div that contains two columns ( col1 and col2 , both taking 50% of the parent div and on float:left ) many projects displayed as images. A big project is twice bigger (height) than a small one. The configuration created makes it possible to display properly the projects to fill the div and not leave blank parts. So, basically, if we have 3 projects, we get a big project in col1 and 2 small in col2. With 4 projects, we get a small + big in col1 and a big + small in col2. And so on.

Problem is, when i'm filtering the different projects (in this example, by, for example, displaying the projects made in JS only, I use show() and hide() which works properly. If animated, the projects just disappear because the hide() seems to be called while the show() isn't completed yet. I was then told about the call back function but it seems to work only on one element, not multiples. Which is not optimal since my filtering always displays multiple projects. I would like to know how to execute the function properly, so it works on all the projects because it seems to apply to only one.

Thanks in advance.

<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

As you've discovered, the completion callback on an animation is called once per element, not once per set.

To have a callback that is invoked when all of the animations have finished, use the .promise() method on the collection:

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