jQuery延迟动画时间

Question

所以我onClick我在我的容器中添加了一个类。当我选择我的按钮时，我隐藏了内容，添加了一些过渡来翻转容器然后显示一些信息。以下是使用..

的代码

$('.btn-click').on('click', function() {
  $('.content').toggleClass('hidden');
  $('.card_container').delay('slow').toggleClass('class_active');
  $('.info').toggleClass('display');
});

并且该类的样式是：

  transform: rotateY(180deg);
  transition: .7s ease-in-out;
  background: black!important;

问题是，.content类的隐藏和显示太慢，所以我可以在.card_container完成旋转之前看到它。如何延迟旋转。我试过了.deley('slow')但是没有用？

我已添加下面的图片以显示之前＆amp;之后，

在：

在：

修改

所以，这是一个更好地理解我的问题的小提琴，对不起！ https://jsfiddle.net/74vgvvhc/

正如您所看到的，转换时内容（文本）略有延迟。我希望内容淡出，翻转卡片，然后淡化其他内容。

Answer 1

您可以在700ms后在setTimeout中切换info和card_active类。这有效，但不是很优雅：

＆＃13;

＆＃13;

$('.container').on('click', function() {
  $('.content').toggleClass('hide');
  $('.container').toggleClass('card_active');
  setTimeout(function() {
    $('.info').toggleClass('display');
    $('.container').toggleClass('card_active');
  }, 700);
})

＆＃13;

html,
body {
  background: lime;
}
.container {
  width: 150px;
  height: 150px;
  background: white;
  border: 5px solid white;
}
.content {
  display: block;
}
.info {
  display: none;
}
.display {
  display: block;
}
.hide {
  display: none;
}
.card_active {
  transform: rotateY(180deg);
  transition: .7s ease-in-out;
  background: black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
  <span class='content'>The content</span>
  <span class='info'>The info</span>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

在延迟700毫秒之后，只需将“.info”类切换为“.display”，因为您已经过渡时间过渡：.7s轻松进出;对于css中的'。card_active'。

$('.container').on('click', function() {
  $('.content').toggleClass('hide');
  $('.container').toggleClass('card_active');
  $('.info').delay(700).fadeToggle('display');
})

您可以在https://jsfiddle.net/Rit_Design/eubrqnew/

查看整件事

Answer 3

您可以使用延迟

的fadeToggle

$('.container').on('click', function() {
  $('.content').toggleClass('hide');
  $('.container').toggleClass('card_active');
  $('.info').delay(500).fadeToggle('display');
})

JsFiddle https://jsfiddle.net/kjarriho/74vgvvhc/7/

希望这有帮助！