Run one jQuery function after another one finishes effect

Question

I've written the following two functions:

<script>          
$('.tile').on('click', function () {

    $(".tile").addClass("flipOutX",1000).promise().done(function () {
        $(".tile-group.six").load("musability-musictherapy-company-overview.html");
    });
});
</script> 

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.

THE WHOLE CSS OF TRANSITIONS ON THE PAGE

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

Answer 1

Simple setTimeout can do the job. You can try this

<script>          
$('.tile').on('click', function () {

    $(".tile").addClass("flipOutX");
    setTimeout(function(){
        $(".tile-group.six").load("musability-musictherapy-company-overview.html");
    }, 1000);

});
</script> 

Answer 2

I'm not sure if the jQueryUI addClass method supports promises, but you can use callbacks.

Also, you have to prevent the default action of the click event.

The equivilant of what you have is:

$('.tile').on('click', function (e) {
    e.preventDefault();

    $(".tile").addClass("flipOutX");
    $(".tile")[0].addEventListener("animationend", function() {
        $(".tile-group.six").load("musability-musictherapy-company-overview.html");
    }, false);
});

Documentation for animation end event: https://developer.mozilla.org/en-US/docs/Web/Events/animationend

Documentation for jQueryUI Add Class can be found at http://jqueryui.com/addClass/

Here is some information on the differences between return false; and event.preventDefault(); https://css-tricks.com/return-false-and-prevent-default/

Answer 3

Better, but more time consuming:

Move transition animation into jQuery.animate() . You will have more control.

For example:

var css = {'height': '100%', opacity: 1};
var options = {
  duration: 3000,
  complete: function() {
    $(".tile-group.six").load("musability-musictherapy-company-overview.html");
  } 
};
$('.tile').on('click', function() {
  $(".tile").animate(css, options);
};

Answer 4

$('.tile').on('click', function () {
         $(".tile").addClass("flipOutX", 1000, load )
});

  function load() {
    $(".tile-group.six").load("musability-musictherapy-company-overview.html");
  }

Answer 5

If .tile is a link, add return false to the end of your click event:

<script>          
$('.tile').on('click', function () {

    $(".tile").addClass("flipOutX",1000).promise().done(function () {
        $(".tile-group.six").load("musability-musictherapy-company-overview.html");
    });

    return false;
});
</script>