等待函数/补间完成，然后再开始另一个

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

希望对您有所帮助！