CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Rifet Gazdić
Rifet Gazdić

Reputation: 83

Check div's margin than move it every one second

The div should move 9 times and than it should stop. Problem is that it moves only one time. Anyone has Idea for solving this? Thanks

$(document).ready(function(){
		var id=1;
		setInterval(move,1000);
		function move(){
			if($(".block").css("margin-left") < "100px"){
				$(".block").animate({marginLeft: "+=10px"});

			}

		}
	});
.block{
	padding: 15px;
    background-color: orange;
    float: left;
    box-shadow: 0px 2px 2px #b1b1b1;
    display: block;
    margin-left: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block"></block>

Upvotes: 1

Views: 55

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 206228

"Npx" < "100px" will not work. Those are Strings!

You should use parseInt() to convert some margin-left string to Number and that you can compare using < 100.
Also, you don't need a setInterval(), use the .animate() callback to recall your move function

$(document).ready(function(){
      
  (function move(){
    if( parseInt($(".block").css("margin-left"), 10) < 100) {
      $(".block").delay(1000).animate({marginLeft: "+=10px"}, move);
    }
  }());
  
});
.block{
  padding: 15px;
  background-color: orange;
  float: left;
  box-shadow: 0px 2px 2px #b1b1b1;
  margin-left: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block"></block>

P.S: it'll move 10 times :)

Upvotes: 1

Related Questions