関数/トゥイーンが完了するまで待ってから

Question

TweenMaxを使用してdivのdivをアニメーション化しますが、別のものを開始する前に完了したいと思います。

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

もありますことは、あなたが多分に使用することができた、onCompleteParamsを経由して渡すことができますparamsはいくつかの汎用関数に、実行したい次の操作を示します。助け

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

願わくば：

TweenLite.to(blocPrototypo, 1.5, { 
    backgroundColor: "#e12a1c", 
    ease: Power1.easeOut, 
    onCompleteParams: [{ prop1: value1, prop2: value2 }], 
    onComplete: function(someParams) { 
     // perform next operation using passed params 
    } 
}); 

別のアプローチは、次のようなonCompleteイベントコールバックとの組み合わせでPromiseまたはjQuery Deferredを使用することができます！