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

debugcn Published at Dev

SilverSurfer

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>

UncaughtTypeError

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>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-08-7

Comments

0 comments

From Dev

Related Related

Article