How to get jQuery to wait until an animation is finished?

Question

I need to wait (prevent) until this animation (flip card) is finished, if you hover again while animation is running it triggers again and restart the animation.

1) I want leave finish the currently animation even you hover again or you hover out.

This is what I have tried so far:

if(!$(this).find(".card").is(':animated')){
    $(this).find(".card").toggleClass('flipped')
}

And this:

$(":animated").promise().done(function() {
    $(this).find(".card").toggleClass('flipped')
});

2) If you re-hover flipped card (blue part) and you leave the cursor inside dont flip it again to the red part while cursor is inside. I tried this canceling setTimeout with clearTimeout but still doesnt work:

$(document).ready(function () {
    var funct = 0
    $(".container").hover(function () {
        clearTimeout(funct);
        $(this).find(".card").addClass('flipped')
    }, function () {
        var val = $(this).find(".card")
        var funct = setTimeout(function () {
            val.removeClass('flipped')
        }, 2000)
    })
 })

Note: I use setTimeOut function because I need reverse flip card 2 seconds after you hover out and I want keep it.

Here is the working snippet code:

$(document).ready(function () {
    $(".container").hover(function(){
        $(this).find(".card").toggleClass('flipped')
            
    }, function(){
        var val = $(this).find(".card")
        setTimeout(function(){ 
            val.toggleClass('flipped')
        }, 2000)
    })
})

.container {
  width: 200px;
  height: 260px;
  position: relative;
  margin: 0 auto 40px;
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  -o-perspective: 800px;
  perspective: 800px;
  display: inline-block;
}

#main {
  border: 1px solid black;
}

button {
  width: 30%;
  height: 10%;
  margin-top: 100px;
  cursor: default;
}

.card {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transition: -webkit-transform 1s;
  -moz-transition: -moz-transform 1s;
  -o-transition: -o-transform 1s;
  transition: transform 1s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: right center;
  -moz-transform-origin: right center;
  -o-transform-origin: right center;
  transform-origin: right center;
}

.card.flipped {
  -webkit-transform: translateX( -100%) rotateY( -180deg);
  -moz-transform: translateX( -100%) rotateY( -180deg);
  -o-transform: translateX( -100%) rotateY( -180deg);
  transform: translateX( -100%) rotateY( -180deg);
}

.card div {
  height: 100%;
  width: 100%;
  color: white;
  text-align: center;
  font-weight: bold;
  position: absolute;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  cursor: pointer;
}

.card .front {
  background: red;
  display: flex;
  justify-content: center;
  align-items: center;
}
/*
.card .front p {
  margin-top: 100px;
}
*/
.card .back p {
  margin: auto;
}

.card .back {
  background: blue;
  -webkit-transform: rotateY( 180deg);
  -moz-transform: rotateY( 180deg);
  -o-transform: rotateY( 180deg);
  transform: rotateY( 180deg);
  display: flex;
  justify-content: center;
  align-items: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
        <div id="main"><br>
        <section class="container">
            <div class="card">
                <div class="front"><p>Test</p></div>
                <div class="back">
                    <p>MyBack</p> 
                </div>
            </div>
        </section>
        </div>
    </div>

That's a working answer for you. If you didn't understand, you could have asked a clarification. I am not the downvoter. I just tried justifying my answer. Thanks. — Soolie, Nov 14 '17 at 13:41
Ok, sorry but your answer couldnt help me, I will need an answer with snippet code. — SilverSurfer, Nov 14 '17 at 13:43
jQuery doesn't have any special tools to help you detect when a CSS animation is complete. Searching for that "Detect when a CSS animation is complete" brings up some pretty decent results. — Kevin B, Nov 14 '17 at 16:36
I dont need any "special tool", just read my question and you will see it have sense. — SilverSurfer, Nov 14 '17 at 16:38
@KevinB That was wrong moderation, I need help with my code and my specific problem not a link to other SO post.............. — SilverSurfer, Nov 14 '17 at 16:51
@SilverSurfer the question linked will help you solve your specific problem. — Sterling Archer, Nov 14 '17 at 16:54
Review of the [duplicate](https://stackoverflow.com/questions/9255279/callback-when-css3-transition-finishes) suggests that it's an appropriate one to me. — Hovercraft Full Of Eels, Nov 14 '17 at 19:06
I agree that it is an appropriate dupe closure; discussion about reopening this also took place in the [SOCVR](https://chat.stackoverflow.com/transcript/message/40028710#40028710) chatroom. — TylerH, Nov 14 '17 at 19:10

score 3 · Accepted Answer · edited Jun 20 '20 at 09:12

Run a conditional check first to determine if the trigger class flipped has already been added to the element in question.
This will imply that the animation is still running or currently active (if the class flipped is already present).

if (!$(this).find(".card").hasClass('flipped')) {
      $(this).find(".card").toggleClass('flipped')
    }

$(document).ready(function() {
  $(".container").hover(function() {
    if (!$(this).find(".card").hasClass('flipped')) {
      $(this).find(".card").toggleClass('flipped')
    }

  }, function() {
    var val = $(this).find(".card")
    setTimeout(function() {
      val.removeClass('flipped')
    }, 1000);
  });
});

.container {
  width: 200px;
  height: 260px;
  position: relative;
  margin: 0 auto 40px;
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  -o-perspective: 800px;
  perspective: 800px;
  display: inline-block;
}

#main {
  border: 1px solid black;
}

button {
  width: 30%;
  height: 10%;
  margin-top: 100px;
  cursor: default;
}

.card {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transition: -webkit-transform 1s;
  -moz-transition: -moz-transform 1s;
  -o-transition: -o-transform 1s;
  transition: transform 1s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: right center;
  -moz-transform-origin: right center;
  -o-transform-origin: right center;
  transform-origin: right center;
}

.card.flipped {
  -webkit-transform: translateX( -100%) rotateY( -180deg);
  -moz-transform: translateX( -100%) rotateY( -180deg);
  -o-transform: translateX( -100%) rotateY( -180deg);
  transform: translateX( -100%) rotateY( -180deg);
}

.card div {
  height: 100%;
  width: 100%;
  color: white;
  text-align: center;
  font-weight: bold;
  position: absolute;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  cursor: pointer;
}

.card .front {
  background: red;
  display: flex;
  justify-content: center;
  align-items: center;
}


/*
.card .front p {
  margin-top: 100px;
}
*/

.card .back p {
  margin: auto;
}

.card .back {
  background: blue;
  -webkit-transform: rotateY( 180deg);
  -moz-transform: rotateY( 180deg);
  -o-transform: rotateY( 180deg);
  transform: rotateY( 180deg);
  display: flex;
  justify-content: center;
  align-items: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <div id="main"><br>
    <section class="container">
      <div class="card">
        <div class="front">
          <p>Test</p>
        </div>
        <div class="back">
          <p>MyBack</p>
        </div>
      </div>
    </section>
  </div>
</div>

Then replace the .toggleClass() method with the .removeClass() method in your setTimeout() function for better "fool-proofing" and more reliable application during intended events - so that this class is never unintentionally added when it should simply be removed.

Edit

To address the issue you've pointed out in the comments, see what the embedded code snippet below demonstrates.
Essentially, a class is added as a flag to check against during specific events at specific times.

$(document).ready(function() {
  
  $('.container').hover(function() {
    if (!$(this).find('.card').hasClass('flipped')) {
      $(this).find('.card').toggleClass('flipped')
    }
    $(this).find('.card').addClass('hovered'); /* add class - this will be our flag we'll check against */

  }, function() {
    var val = $(this).find('.card');
    $(this).find('.card').removeClass('hovered'); /* remove class - if we refrain from hovering over again, the condition block below will return true and run the code within */
    setTimeout(function() {
      if(!val.hasClass('hovered')) {
        val.removeClass('flipped')
      }
    }, 1000);
  });
  
});

.container {
  width: 200px;
  height: 260px;
  position: relative;
  margin: 0 auto 40px;
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  -o-perspective: 800px;
  perspective: 800px;
  display: inline-block;
}

#main {
  border: 1px solid black;
}

button {
  width: 30%;
  height: 10%;
  margin-top: 100px;
  cursor: default;
}

.card {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transition: -webkit-transform 1s;
  -moz-transition: -moz-transform 1s;
  -o-transition: -o-transform 1s;
  transition: transform 1s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: right center;
  -moz-transform-origin: right center;
  -o-transform-origin: right center;
  transform-origin: right center;
}

.card.flipped {
  -webkit-transform: translateX( -100%) rotateY( -180deg);
  -moz-transform: translateX( -100%) rotateY( -180deg);
  -o-transform: translateX( -100%) rotateY( -180deg);
  transform: translateX( -100%) rotateY( -180deg);
}

.card div {
  height: 100%;
  width: 100%;
  color: white;
  text-align: center;
  font-weight: bold;
  position: absolute;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  cursor: pointer;
}

.card .front {
  background: red;
  display: flex;
  justify-content: center;
  align-items: center;
}


/*
.card .front p {
  margin-top: 100px;
}
*/

.card .back p {
  margin: auto;
}

.card .back {
  background: blue;
  -webkit-transform: rotateY( 180deg);
  -moz-transform: rotateY( 180deg);
  -o-transform: rotateY( 180deg);
  transform: rotateY( 180deg);
  display: flex;
  justify-content: center;
  align-items: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <div id="main"><br>
    <section class="container">
      <div class="card">
        <div class="front">
          <p>Test</p>
        </div>
        <div class="back">
          <p>MyBack</p>
        </div>
      </div>
    </section>
  </div>
</div>

Thanks its a nice idea, makes me sense :) . But still have a problem, if you re-hover blue part and leave the cursor inside, the flipped card goes to red part, and I dont want that happens. — SilverSurfer, Nov 14 '17 at 15:51
Answer updated to address that issue (collapsed code snippet). — UncaughtTypeError, Nov 14 '17 at 16:42
Dude help vamped and then fell straight off his rocker ^. Flagging whole discussion as non-constructive haha — , Nov 14 '17 at 18:35
@SilverSurfer well this helped me as much as it helped you. Looks like I missed quite the party here though. And I do think the rep reversal script might have its work cut out for it come 03:00 UTC — UncaughtTypeError, Nov 14 '17 at 21:02

How to get jQuery to wait until an animation is finished?

1 Answers1

Edit