在啓動另一個之前等待函數/補間完成

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

希望幫助！