CODEWITHSUNDEEP
javascriptjquery
S S
S S

Reputation: 1503

How to move the div with delay on each step

I have a div which I need to move to right side. If the input is lets say steps = 1000, then div needs to move at right side with the increment of 50. I need to make this movement look like a step of 50 then few second stop they from 50 to 100. 

<button>Start</button>

<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>

<script type="text/javascript">
    $("button").click(function(){
        var steps = 1000;
        for(var i =0; i<=steps; i+50)
        {
            $("div").animate({left: i+'px'});
        }
    })
</script>

Upvotes: 0

Views: 185

Answers (2)

Amani Ben Azzouz
Amani Ben Azzouz

Reputation: 2565

Try to change your for loop to this , to have a step by 50:

 for(var i =0;i<=steps;i+=50){ 
    $("div").animate({left: i+'px'});
 }

Upvotes: 1

Mayank Pandeyz
Mayank Pandeyz

Reputation: 26258

Try something like this in JS:

setInterval(function() {
  elem.style.left = ( left += 10 ) + "px";
}, 100);

Working Fiddle

Upvotes: 1

Related Questions