Question

我想检测我的所有fadeOut何时完成

我的fadeOut在容器的所有项目上随机持续时间。在每个fadeOut之后我删除项目，在所有项目fadeOut之后添加一个新项目。这个新项目被隐藏，等待fadeIn

function fadeOutItem(){ 
$('div.wrapper').children('.item-box').each(function(){
    $(this).fadeOut(Math.floor(Math.random() * 1300) + 200, function(){
        $(this)[0].remove();
    });
});
}

Answer 1

基本上，您需要知道包装器何时不再包含任何子项。您可以在fadeOut本身的回调函数中执行此操作：

function fadeOutItem(){ 
    $('div.wrapper').children('.item-box').each(function(){
        $(this).fadeOut(Math.floor(Math.random() * 1300) + 200, function(){
            $(this).remove();
            if ($('div.wrapper').children('.item-box').length === 0) {
                // add new item
            }
        });
    });
}

Answer 2

您可以添加if条件语句来查找如下所示的总元素

function fadeOutItem(){ 
$('div.wrapper').children('.item-box').each(function(i){
    $(this).fadeOut(Math.floor(Math.random() * 1300) + 200, function(){
        $(this)[0].remove();        
    });
    // Check for the instance and then add it
    if (i === $('div.wrapper').children('.item-box').length) {
                //At the last element add your elements
        }
});
}

Answer 3

尝试使用$（this）.remove（）;而不是$（this）[0] .remove（）;并关注Link了解更多详情

在所有fadeOut之后调用一个函数

3 个答案: