Run one jQuery function after another one finishes effect <p>I've written the following two functions:</p> <pre><code>&lt;script&gt; $('.tile').on('click', function () { $(".tile").addClass("flipOutX",1000).promise().done(function () { $(".tile-group.six").load("musability-musictherapy-company-overview.html"); }); }); &lt;/script&gt; </code></pre> <p>The first one performs a transition on some tiles that lasts about 3 seconds, and even though I have included .promise and .done the second function still loads the html page right away instead of waiting for the effect/transition to finish. I was thinking of using a setTimeinterval to make the second function wait until the first one finishes but I don't know how to use that to accomplish my desired behavior.</p> <p>THE WHOLE CSS OF TRANSITIONS ON THE PAGE </p> <pre><code>.animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animated.two { -webkit-animation-delay: 120ms; animation-delay: 120ms; } .animated.three { -webkit-animation-delay: 320ms; animation-delay: 320ms; } .animated.four { -webkit-animation-delay: 520ms; animation-delay: 320ms; } .animated.five { -webkit-animation-delay: 720ms; animation-delay: 720ms; } .animated.six { -webkit-animation-delay: 920ms; animation-delay: 920ms; } .animated.seven { -webkit-animation-delay: 1020ms; animation-delay: 1020ms; } .animated.eight { -webkit-animation-delay: 1220ms; animation-delay: 1220ms; } .animated.nine { -webkit-animation-delay: 1620ms; animation-delay: 1620ms; } .animated.ten { -webkit-animation-delay: 1820ms; animation-delay: 1820ms; } .animated.eleven { -webkit-animation-delay: 2020ms; animation-delay: 2020ms; } .animated.twelve { -webkit-animation-delay: 2220ms; animation-delay: 2220ms; } @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); } } .flipInX { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; } /*CSS BIT FOR REVERSING THE ANIMATION ONCLICK EVENT 8*/ @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } @keyframes flipOutX { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } .flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } </code></pre>