CODEWITHSUNDEEP
javascriptjquerycsscss-transitions
Jascha Goltermann
Jascha Goltermann

Reputation: 1124

Create a chain of transitions using jQuery

I have created a little jQuery function with the help of transit.js that applies a transition to an element, and then to the next element after the transition is done.

The code applies the transition ony by one to whatever element is inside the .container div.

You can see the code in action here: 

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

What would be the best way to accomplish this with jQuery but without using transit.js?

Upvotes: 1

Views: 123

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337691

To do this with jQuery alone just change transition() to 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>

Upvotes: 3

Related Questions