同時に起動する関数

Question

私は、X要素を順番にフェードアウトさせ、もう一度別の関数の実行を終了する関数を記述しようとしています。

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

何らかの理由で 'showTimeline（）'が同時に実行され、なぜその理由がわかりませんか？

---

全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

すべての要素が退色するまで待つ必要があります。 Working Example

しかし、基本的にはすべての要素が薄れている時に知ってカウンターを追加します。

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

    } 

Answer 2

あなたは、ループ内showTimeline関数を呼び出しています。代わりに、このようにそれを呼び出す...

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 3

あなたはこのスニペットが

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

私はそれを完全にテストすることはできませんよしかし、あなたはこれを試すことができ有用であろうjqueryのwhen

希望を使用することができます

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