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（）;

之后

从setTimeout完成函数后调用函数

2 个答案: