CODEWITHSUNDEEP
javascriptjquery
rusly
rusly

Reputation: 1524

call function after function from setTimeout finish

Below is function fadeItem() and will run after 1 second after DOM is loaded, now i want to call another function after fadeItem() finish.

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;
}

the problem is fadeItem() and removeClass() is run at the same time. I want to run fadeItem() first then removeClass().

So the result should be underline link for Company Profile after fadeItem() animation finish, not at the beginning.

You can check my fiddle HERE

Upvotes: 0

Views: 1139

Answers (2)

Pesulap
Pesulap

Reputation: 894

Type in what you want to be out after the fadeout to the callback function as follows:

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

If you need to remove the class after he displays all the elements, thus:

 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');
    }
}

Upvotes: 2

Tarmo
Tarmo

Reputation: 4081

Put the removeClass inside the setTimeout, right after fadeItem();

Upvotes: 0

Related Questions