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

希望这有帮助！

在启动另一个之前等待功能/补间完成

1 个答案: