在启动另一个之前等待函数/补间完成

Question

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

在这JSFiddle，你可以看到divs重叠，如果要快速的链接。

有没有简单的解决方案呢？

$(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有onCompletecallbacks可用于开始下一个操作之前，等待完成：

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

还有PARAMS您可以通过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 
}); 

希望帮助！