I have this simple animation that I need help with. Basically it is a
square that moves left to right. It is controlled by a left and a
right button. The only problem is that I need the square to stop once
it reaches a certain distance. Right now it will just keep going and
going as far as you want it to go. I need an if statement that tells
the square to stop if it reaches a certain distance. Thanks for your
help and time.
Here is my code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd";>
<html>
<head>
<script src="http://www.karavelshoes.com/jqueryLatest.js";></script>
<script>
$(document).ready(function(){
$("#right").click(function(){
$(".block").animate({left: '+=50px'}, "slow");
});
$("#left").click(function(){
$(".block").animate({left: '-=50px'}, "slow");
});
});
</script>
<style>div {
position: absolute;
background-color: #abc;
width: 90px;
height: 90px;
margin: 5px;
}
</style>
</head>
<body>
<button id="left">«</button> <button id="right">»</button>
<div class="block"></div>
</body>
</html>
