CODEWITHSUNDEEP
javascriptjquery
Liam
Liam

Reputation: 9855

Functions firing at same time

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

Upvotes: 0

Views: 76

Answers (3)

Ariel
Ariel

Reputation: 1436

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

    }

Upvotes: 0

brk
brk

Reputation: 50291

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

Upvotes: 0

m87
m87

Reputation: 4523

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

Upvotes: 1

Related Questions