如何让jQuery等到动画结束？

时间：2017-11-14 13:33:03

标签： javascript jquery html css css3

我需要等待（阻止）直到这个动画（翻转卡）完成，如果你在动画运行时再次悬停它再次触发并重新启动动画。

1）我希望离开完成当前动画，即使你再次悬停或者你徘徊。

这是我到目前为止所尝试的：

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

而且：

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


2）如果您重新悬停翻转的卡片（蓝色部分）并将光标留在里面，当光标在里面时，请不要再将其翻转到红色部分。我尝试使用setTimeout取消clearTimeout，但仍然无效：

$(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)
    })
 })

注意：我使用setTimeOut功能，因为我在你徘徊2秒后需要反向翻转卡，我想保留它。

以下是工作代码段：

＆＃13;
＆＃13; 
$(document).ready(function () {
    $(".container").hover(function(){
        $(this).find(".card").toggleClass('flipped')
            
    }, function(){
        var val = $(this).find(".card")
        setTimeout(function(){ 
            val.toggleClass('flipped')
        }, 2000)
    })
})
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：2)

首先运行条件检查以确定 是否已将触发类flipped添加到相关元素中。
这意味着动画仍在运行或当前处于活动状态（如果已经存在类flipped）。

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

＆＃13;
＆＃13; 
$(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);
  });
});
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

然后使用.toggleClass()函数中的.removeClass()方法替换setTimeout()方法，以获得更好的＆＃34;万无一失的＆＃34;在预期事件期间提供更可靠的应用程序 - 以便在简单地删除此类时不会无意中添加该类。

修改

要解决您在评论中指出的问题，请参阅下面的嵌入式代码段演示内容。
实质上，在特定时间的特定事件期间，会添加类作为标记以检查。

＆＃13;
＆＃13; 
$(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);
  });
  
});
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题