功能在同一時間觸發

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

您可以使用jQuery when

希望這個片段將

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

我不能完全測試有用的，但你可以試試這個

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