javascript - 使用jQuery创建转换链

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

该代码将过渡ony应用于.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>

在不使用transit.js的情况下使用jQuery完成此操作的最佳方法是什么？

最佳答案

要仅使用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>

关于javascript - 使用jQuery创建转换链，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51308790/