Functions firing at same time

Question

Im trying to write a function that fades X elements out in sequence and once finished run another function.

    function fadeOut(pro){
        $('.interactive ul li').each(function(i) {
            $(this).find('a').delay(200*(i+1)).fadeOut(200,function(){
                $('.opening-title').delay(500).fadeOut();
            });
            showTimeline(pro);
        });         
    }

    function showTimeline(pro){
        $('.timeline-container').addClass('in-view');
        console.log(pro);
    }

For some reason 'showTimeline()' runs at the same time and I can't understand why?

---

Full JS

$(document).ready(function() {

    'use strict';

    function init() {

        function showPath(pro) {
            fadeOut(pro);

        }

        function fadeOut(pro) {
            $('.ul li').each(function(i) {
                $(this).find('a').delay(1200 * (i + 1)).fadeOut(200, function() {
                    $('.title').delay(500).fadeOut();
                });
            });
            showTimeline(pro);
        }

        function showTimeline(pro) {
            $('.container').addClass('in-view');
            console.log(pro);
        }

        $('.path').on('click', function() {
            showPath( $(this).attr('data-pro') );
        });


    } //end init

    init();

}); //end doc ready

Answer 1

You are calling showTimeline function in a loop. Call it this way instead ...

function fadeOut(pro) {
    $('.interactive ul li').each(function(i) {
        $(this).find('a').delay(200 * (i + 1)).fadeOut(200, function() {
            $('.opening-title').delay(500).fadeOut();
        });
    });
    showTimeline(pro);
}

function showTimeline(pro) {
    $('.timeline-container').addClass('in-view');
    console.log(pro);
}

Answer 2

You can use jquery when

Hope this snippet will be useful

var fadeOut=function(pro){
        $('.interactive ul li').each(function(i) {
            $(this).find('a').delay(200*(i+1)).fadeOut(200,function(){
                $('.opening-title').delay(500).fadeOut();
            });
            showTimeline(pro);
        });         
    }

 var showTimeline=function(pro){
        $('.timeline-container').addClass('in-view');
        console.log(pro);
    }
$.when(fadeOut()).then(showTimeline());

I am not able to completely test it but you can try this

$(document).ready(function() {

  'use strict';

  $('.path').on('click', function() {
    $.when(fadeOut($(this).attr('data-pro'))).then(showTimeline($(this).attr('data-pro')));

  });

  function fadeOut(pro) {
    $('.ul li').each(function(i) {
      $(this).find('a').delay(1200 * (i + 1)).fadeOut(200, function() {
        $('.title').delay(500).fadeOut();
      });
    });
  }

  function showTimeline(pro) {
    $('.container').addClass('in-view');
    console.log(pro);
  }
});

Answer 3

You need to wait until all elements are faded. Working Example

But, basically just add a counter to know when all elements are faded:

var hiddenElements = 0;  
function fadeOut(pro){
        $('.interactive ul li').each(function(i) {
            $(this).find('a').delay(200*(i+1)).fadeOut(200,function(){
                $('.opening-title').delay(500).fadeOut();
                hiddenElements++;
                if (hiddenElements === $('.interactive ul li').length){
                  showTimeline(pro);          
                }
            });            
        });    

    }