How to animate consecutively using jQuery?

Question

I would like to animate these dots consecutively. If sample1 dot is 100%, the sample2 will animate to 100%, then the sample3 will be next to animate.

I'm trying to write the code, but failed. The output of my code is all dots animate together.

Here is my code

var previous = null;
$(".myblock").each(function(){
  var a = $(this); 
  if(previous){
     a.find("span").animate({ left: "100%"},1000,function(){
      $(this).attr("rel","100");
    });
  }else{
  var d =  $(this).prev().find("span").attr("rel");
     a.find("span").animate({ left: "100%"},1000,function(){
      $(this).attr("rel","100");
    });
  }

  previous = this;

});

If you have tutorial like this. please give me links. I'm doing an experiment if this is applicable in jQuery.

Update

My html

<div class="block-row">
<div class="myblock">
     <label>sample1</label>
     <div class="block-rate">
       <span></span>
     </div>
</div>
<div class="myblock">
     <label>sample2</label>
        <div class="block-rate">
            <span></span>
        </div>
     </div>
<div class="myblock">
      <label>sample3</label>
        <div class="block-rate">
              <span></span>
        </div>
    </div>
</div>

my CSS

.block-row{
    margin-top: 40px;
}
.block-rate {
    background: #ccc none repeat scroll 0 0;
    height: 3px;
    position: relative;
}
.myblock{
    margin-bottom: 20px;
}
.block-row label{
    padding-bottom: 10px;
}
.block-rate span{
    display: block;
    position: absolute;
    left: 0;
    top: -10px;
    width: 25px;
    height: 25px;
    border-radius:50%;
    background-color: #000;
}

if you could post your html/css it'd be great – Santiago Hernández Sep 03 '16 at 03:08 — Santiago Hernández, Sep 03 '16 at 03:08
I update my post @SantiagoHernández – user3818576 Sep 03 '16 at 03:14 — user3818576, Sep 03 '16 at 03:14
cool thanks, take a look at my answer – Santiago Hernández Sep 03 '16 at 03:17 — Santiago Hernández, Sep 03 '16 at 03:17

score 1 · Answer 1 · edited May 23 '17 at 12:16

Well, .animate() and .fadeIn() accepts a call back so you can

$('#div1').animate({top:100}, 1500, function() {
    $('#div2').fadeIn('slow', function() {
        $('#div3').fadeIn('slow');
    });
});

Heres another example I found off here, which is pretty straightforward. See Start animation only after first is done

$('.search-toggle').on('click', function(){
    $("body").animate({ scrollTop: 0 }, "slow", function(){
        $('.search-drawer').slideToggle(); // or fadeIn(), show() ect..
    });
});

You could also try toying with the .delay() Which could kind of have the "one after the other" effect like the following Start animation one after the other

$("span").each(function(index) {
    $(this).delay(400*index).fadeIn(300);
});

If you can post a fiddle of your code I can try giving you an example :)

I update my post. I will the try delay(). maybe delay will help me. — user3818576, Sep 03 '16 at 03:16

score 0 · Accepted Answer · answered Sep 03 '16 at 03:17

var elements = $(".myblock span").toArray().reverse();
var animateNext = function() {
    if(elements.length > 0) {
        $(elements.pop()).animate({ left: "100%"},1000, animateNext);
    }
}
animateNext();

.block-row{
    margin-top: 40px;
}
.block-rate {
    background: #ccc none repeat scroll 0 0;
    height: 3px;
    position: relative;
}
.myblock{
    margin-bottom: 20px;
}
.block-row label{
    padding-bottom: 10px;
}
.block-rate span{
    display: block;
    position: absolute;
    left: 0;
    top: -10px;
    width: 25px;
    height: 25px;
    border-radius:50%;
    background-color: #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block-row">
<div class="myblock">
     <label>sample1</label>
     <div class="block-rate">
       <span></span>
     </div>
</div>
<div class="myblock">
     <label>sample2</label>
        <div class="block-rate">
            <span></span>
        </div>
     </div>
<div class="myblock">
      <label>sample3</label>
        <div class="block-rate">
              <span></span>
        </div>
    </div>
</div>

yup the third argument of `$(selector).animate()` is a callback function, its called when the animation ends — Santiago Hernández, Sep 03 '16 at 03:22
well the magic relies on [`$().toArray()`](https://api.jquery.com/toArray/), [`Array.reverse()`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse) and [`Array.pop()`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/pop) — Santiago Hernández, Sep 03 '16 at 03:30
Better to add description in the answer. Code only answers are most likely to be downvoted. — Jai, Sep 03 '16 at 05:37

How to animate consecutively using jQuery?

2 Answers2