CODEWITHSUNDEEP
jqueryanimation
user3818576
user3818576

Reputation: 3391

How to animate consecutively using jQuery?

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.

enter image description here

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;
}

Upvotes: 0

Views: 148

Answers (2)

Santiago Hern&#225;ndez
Santiago Hern&#225;ndez

Reputation: 5636

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>

Upvotes: 0

Motombo
Motombo

Reputation: 1787

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 :)

Upvotes: 1

Related Questions