setTimeout函数完成后的调用函数

Question

下面是函数fadeItem（），并且在加载DOM后1秒后运行，现在我想在fadeItem（）完成后调用另一个函数。

HTML

<ul class="navigation ui-slider-tabs-list"> 
    <li style="" class="effect selected hide_selected"> <a id="" href="#company-profile"> 
     Company Profile            </a> 
    </li> 
    <li style="" class="effect"> <a id="" href="#sg-corporate-value"> 
     SG Corporate Value            </a> 
    </li> 
    <li style="" class="effect"> <a id="" href="#sg-corporate-philosophy"> 
     SG Corporate Philosophy             </a> 
    </li> 
    <li style="" class="effect"> <a id="" href="#sg-critical-success-factors"> 
     SG Critical Success Factors             </a> 
    </li> 
</ul> 

JS

$(document).ready(function() { 

    function fadeItem() { 
     $('ul.navigation li:hidden:first').delay(100).fadeIn(fadeItem); 
    } 

    setTimeout(function() { 
     // Do something after 1 second 
     fadeItem();  

    }, 1000); 

    // try to run this after fadeItem() finish 
    $('.ui-slider-tabs-list li.selected').removeClass('hide_selected'); <---- 

    $('ul.navigation li').hide(); 

}); 

CSS

a { 
    text-decoration:none; 
} 
.selected a { 
    text-decoration: underline; 
} 
.hide_selected a { 
    text-decoration: none!important; 
} 

问题是fadeItem（）和removeClass（）同时运行。我想先运行fadeItem（）然后再运行removeClass（）。

因此，在fadeItem（）动画完成后，结果应该是公司简介的下划线链接，而不是开头。

你可以在你想要的淡出回调函数后要出如下检查我的小提琴HERE

Answer 1

类型：

function fadeItem() { 
    $('ul.navigation li:hidden:first').delay(100).fadeIn(function(){ 
     $(this).removeClass('hide_selected'); 
     fadeItem(); 
    }); 
} 

如果需要，他会显示所有后删除类元素，因此：

function fadeItem() { 
    if($('ul.navigation li:hidden').length>0){ 
     $('ul.navigation li:hidden:first').delay(100).fadeIn(function(){ 
      fadeItem(); 
     }); 
    } else { 
     $('.ui-slider-tabs-list li.selected').removeClass('hide_selected'); 
    } 
} 

Answer 2

将removeClass放在setTimeout中，在fadeItem（）后面;