使用 jQuery 创建一个过渡链答案

【问题标题】：Create a chain of transitions using jQuery使用 jQuery 创建一个过渡链
【发布时间】：2018-07-12 22:56:17
【问题描述】：

在transit.js 的帮助下，我创建了一个小jQuery 函数，它将转换应用于一个元素，然后在转换完成后应用于下一个元素。

代码将转换只应用到 .container div 内的任何元素。

您可以在此处查看正在运行的代码：

$(document).ready(function () {

    showDiv($('.container div:first'));

    function showDiv(tadaa) {
        tadaa.transition({
            opacity: 1
        }, 1000, function () {
            //call back
            showDiv(tadaa.next());
        });
    }
});

.container {
    border: 2px solid;
}

.container *{
    opacity: 0;
    display: inline-block;
    width: 50px;
    height: 100px;
    margin: 10px;
    vertical-align: top;
}

.container div {
    background-color: black;
}

.container p {
    background-color: red;
}

.container span {
    background-color: green;
}

.container input{
    background-color: blue;
    border: none;
    padding: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ricostacruz.com/jquery.transit/jquery.transit.min.js"></script>

<div class="container">
  
<div></div>
  <p></p>
  <span></span>
  <p></p>
  <div></div>
  <input>
  <div></div>
  <p></p>

</div>

使用 jQuery 但不使用 transit.js 的最佳方法是什么？

【问题讨论】：

标签： javascript jquery css css-transitions

【解决方案1】：

要单独使用 jQuery，只需将 transition() 更改为 animate()：

$(document).ready(function() {
  showDiv($('.container div:first'));

  function showDiv(tadaa) {
    tadaa.animate({
      opacity: 1
    }, 1000, function() {
      //call back
      showDiv(tadaa.next());
    });
  }
});

.container {
  border: 2px solid;
}

.container * {
  opacity: 0;
  display: inline-block;
  width: 50px;
  height: 100px;
  margin: 10px;
  vertical-align: top;
}

.container div {
  background-color: black;
}

.container p {
  background-color: red;
}

.container span {
  background-color: green;
}

.container input {
  background-color: blue;
  border: none;
  padding: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div></div>
  <p></p>
  <span></span>
  <p></p>
  <div></div>
  <input>
  <div></div>
  <p></p>
</div>

【讨论】：