在多个元素上执行回调函数

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

所以它就是这样。我有一个div，其中包含两列（col1和col2，均取50％的父div和float：左）许多项目显示为图像。 A 大项目是两倍大（高度）比小之一。创建的配置可以正确显示填充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(); 
}

来源

2016-01-13 Mohamed Sarre

请创建_small，自成体系example_演示该问题 – Alnitak

感谢答复。下面是显示不同过滤器的两个简短视频。有了基本的动画： https://youtu.be/oA6WNMufd0s 用幻灯片放映ň动画： https://youtu.be/9viLBubskSI –

我的意思是* *效果基本show –

正如你已经发现，在动画完成回调每个元素调用一次，每套一次也没有。

若要当所有的动画已完成调用的回调，使用.promise()方法的集合：

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

来源

2016-01-13 12:35:02 Alnitak

非常感谢，它的工作完美。 –

在多个元素上执行回调函数

回答

相关问题