具有 animate.css 和 jquery 的顺序动画

Sequential animation with animate.css and jquery

本文关键字：顺序 动画 jquery animate css 具有      更新时间：2023-09-26

如何使它们中的每一个都按顺序淡入淡出？

演示 http://jsfiddle.net/uz2rm8jy/4/

.HTML

<div class="c one"></div>
<div class="c two"></div>
<div class="c three"></div>

我的js

$(function() {
$('.c').each(function(i) {
$(this).delay((i++) * 150).addClass('fadeInUp'); })
});
你可以

通过使用jquery的fadeTo使用与你已经到位的完全相同的逻辑来实现这一点......

$(function() {
  $('.c').each(function(i) {
  $(this).delay((i++) * 150).fadeTo(500,1); })
});


$(function() {
$('.c').each(function(i) {
$(this).delay((i++) * 150).fadeTo(500,1); })
});
.one,.two,.three {
    height: 50px;
    background: #dddddd;
    width: 50px;
    border-radius: 50%;
    display:inline-block;
    margin: auto 10px;
    opacity:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="c one"></div>
<div class="c two"></div>
<div class="c three"></div>

问题是关于 Animate .css库，但答案对 animate 没有帮助.css，我遇到了同样的问题并最终解决了它。 见下面的小提琴。JSFiddle

法典：网页示例

<div class="content">
  <div class="firstanimation">
    <h1 data-animation="fadeInUp" style='display: none'>
      This is Title
    </h1>
  </div>
  <div class="secondanimation">
    <p data-animation="wobble" style='display: none'>
      This is Description
    </p>
  </div>
  <div class="lastanimation">
    <p data-animation="bounce" style='display: none'><a href="#">Link</a></p>
  </div>
</div>

Jquery：

// With Queue
function animate2(queue) {
  if (queue && queue.length > 0) {
    var elm = queue.shift();
    var animClass = "animated " + $(elm).data('animation');
    $(elm).show().addClass(animClass)
      .on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
        $(elm).removeClass();
        animate2(queue);
      });
  }
};

$(function() {
  var animationQueue = [
    $('.content').find('.firstanimation h1'),
    $('.content').find('.secondanimation p'),
    $('.content').find('.lastanimation p')
  ];
  animate2(animationQueue);
});

有两个选项供您选择。

  1. 转换结束事件，可以使用 JavaScript 触发
  2. 过渡延迟

可以在具有过渡的任何元素上侦听过渡结束事件。您可以在转换结束时触发函数，如下所示：

element.addEventListener( "transitionend", function() {
    // run code here to add class on next element
});

你必须确保添加必要的前缀，但jQuery可以提供帮助。这在for循环中很容易实现。

没有额外JS或转换结束事件的另一种选择是将.c.two和.c.three的转换延迟到实际转换的长度（是.c.three的两倍）。您可以使用相应元素上的 transition-delay 属性直接在 CSS 中添加它。

我希望这有所帮助。

我不确定你的意思，根据你的代码，你只是想将类"fadeInUp"添加到你的div 中。但是试试这个也许会有所帮助。

function fade(e){
$(e+":not(:visible):first").fadeIn(function(){
    fade(e);
});
}

要使用函数，只需将类"C"作为参数传递：例如。

fade('.c');
相关文章：