javascript - 等待功能/补间完成，然后再开始另一个

Question

我使用 TweenMax 为具有多个 .mouseover 的 div 设置动画，但我希望在开始另一个之前完成一个。

在此JSFiddle , 如果要快速访问链接，您可以看到 div 重叠。

有没有简单的解决方案？

$(document).ready(function() {

  var blocPrototypo = $("#wrap-image-menu");


  $("#prototypo").mouseover(function() {
    TweenLite.to(blocPrototypo, 1.4, {
      backgroundColor: "#24d390",
      ease: Circ.easeInOut
    });
    TweenMax.to(blocPrototypo, 0.5, {
      width: "39vw",
      ease: Circ.easeInOut,
      repeat: 1,
      yoyo: true
    });

    var allExcept = $(".all-img-menu").not(document.getElementById("img-prototypo"));
    TweenMax.to(allExcept, 0.9, {
      left: "0px",
      opacity: 0
    });

    TweenMax.to($("#img-prototypo"), 0.7, {
      opacity: "1",
      width: "55vw",
      left: "-90px",
      ease: Expo.easeOut,
      delay: "0.65"
    });

    TweenMax.to($("#line-pagination"), 0.5, {
      width: "76px",
      ease: Circ.easeInOut,
      repeat: 1,
      yoyo: true
    });

    $("#current-page").fadeOut(function() {
      $(this).text("01").fadeIn(1000);
    });

  });




  $("#esadvalence").mouseover(function() {

    TweenLite.to(blocPrototypo, 1.5, {
      backgroundColor: "#e12a1c",
      ease: Power1.easeOut
    });
    TweenMax.to(blocPrototypo, 0.5, {
      width: "39vw",
      ease: Circ.easeInOut,
      repeat: 1,
      yoyo: true
    });

    var allExcept = $(".all-img-menu").not(document.getElementById("img-esadvalence"));

    TweenMax.to(allExcept, 0.9, {
      left: "0px",
      opacity: 0
    });

    TweenMax.to($("#img-esadvalence"), 0.7, {
      opacity: "1",
      width: "55vw",
      left: "-90px",
      ease: Expo.easeOut,
      delay: "0.65"
    });

    TweenMax.to($("#line-pagination"), 0.5, {
      width: "76px",
      ease: Circ.easeInOut,
      repeat: 1,
      yoyo: true
    });

    $("#current-page").fadeOut(function() {
      $(this).text("02").fadeIn(1000);
    });

  });

});

Answer 1

TweenLite 和 TweenMax 有 onComplete callbacks可用于在开始下一个操作之前等待完成:

TweenLite.to(blocPrototypo, 1.5, {
    backgroundColor: "#e12a1c",
    ease: Power1.easeOut,
    onComplete: function() {
       // perform next operation
    }
});

您还可以通过 onCompleteParams 传递参数，您或许可以使用它来向某些通用函数指示您要执行的下一个操作。

TweenLite.to(blocPrototypo, 1.5, {
    backgroundColor: "#e12a1c",
    ease: Power1.easeOut,
    onCompleteParams: [{ prop1: value1, prop2: value2 }],
    onComplete: function(someParams) {
       // perform next operation using passed params 
    }
});

另一种方法是使用 Promise或 jQuery Deferred结合 onComplete 事件回调，例如:

function foo() {
   return new Promise(function(resolve, reject) {
       TweenLite.to(blocPrototypo, 1.5, {
            backgroundColor: "#e12a1c",
            ease: Power1.easeOut,
            onComplete: function() {
               return resolve(true);
            }
        });       
   });
}

foo().then(function() {
   // perform next operation
});

希望对您有所帮助!