user3818576 user3818576 - 3 months ago 7
jQuery Question

how to animate consecuctively using jquery?

I would like to animate this dots consecutively. If sample1 dot is 100%, the sample2 will animate to the 100%, then the sample3 will be next to animate.
enter image description here

I'm trying to make a 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;
}

Answer

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>

Comments