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

出于某种原因＆＃39; showTimeline（）＆＃39;在同一时间运行，我不明白为什么？

完整的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

您正在循环调用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 2

您可以使用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);
  }
});

Answer 3

您需要等到所有元素都褪色。 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);          
                }
            });            
        });    

    }

功能同时发射

3 个答案: