在启动另一个之前等待函数/补间完成
我使用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);
});
});
});
TweenLite
和TweenMax
有onComplete
callbacks可用于开始下一个操作之前,等待完成:
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
});
希望帮助!
感谢您的回复!也许我应该使用'onComplete',但有关如何列出该功能不动画的任何想法? –
我不想启动onComplete的任何函数,但允许一个函数在onComplete之后运行。并且'onComplete'被添加到特定的补间。它不能在整个功能上? –
https://*.com/questions/10031320/stopping-next-hover-animation-from-happening-until-current-is-complete –
@AlivetoDie感谢您的链接,我试着用'if($(这个).is(':animated')){'和'else',但没有反应。可能不聪明... –