stop animation

by Nikita Jadhao

HTML

<div id="container">
		<div id = "controlBox">
			<input id= "start"type="button" value="start" />
			<input id= "pause"type="button" value="pause" />
			<input id= "stop"type="button" value="stop" />
		</div>
		<div>
			<label> Speed </label>
			<div id="slider">
			</div>
			<div id="animatorBox">
			</div>
			<h4> range </h4>
			<div id="slider-range">
			</div>
		</div>
	</div>

CSS

@CHARSET "ISO-8859-1";
*{
margin: 0px;
padding: 0px
}

.container{
border: 1px solid black;
width:950px;
border-bottom:1px solid black;
}

#animatorBox{
top:87px;
padding:3px;
height:540px;
width:290px;
background-image:url('http://4.bp.blogspot.com/-FU4yGL9FT8I/TyrYZpkotRI/AAAAAAAAAxw/ZrDOGC_1BjQ/s1600/first+steps+preview.jpg');
position:absolute;

}

#controlBox{
	padding:3px;
	height:40px;
    left: 250px; 
	background-color:#cccccc;
	position:absolute;
}
input{
	padding:3px;
	height:30px;
	width:70px;
}

#slider{  
    border-width: 1px;  
    border-style: solid;  
    border-color: #333 #333 #777 #333;  
    border-radius: 25px;  
    width: 300px;  
    position: absolute;  
    height: 13px;  
    background-color: #8e8d8d;  
    box-shadow: inset 0 1px 5px 0px rgba(0, 0, 0, .5);   
    left: 220px;  
    top:71px;
}

#slider-range{  
	top:700px;
    border-width: 1px;  
    border-style: solid;  
    border-color: #333 #333 #777 #333;  
    border-radius: 25px;  
    width: 950px;  
    position: absolute;  
    height: 13px;  
    background-color: #8e8d8d;  
    box-shadow: inset 0 1px 5px 0px rgba(0, 0, 0, .5);   
    left:20px;  
}
.ui-slider-handle {  
    position: absolute;  
    z-index: 2;  
    width: 25px;  
    height: 25px;  
    cursor: pointer; 
    border-radius: 15px;   
    background: -moz-linear-gradient(right top,#ADD6FF 0%,  ,white 130%);
    background: -webkit-linear-gradient(right top,  #ADD6FF 0%,  white 130%);
    top: -7px;  
    margin-left: -12px;  
}
label{
	 position: absolute; 
	  top:71px; 
	  left: 120px; 
	  font-size:20px; 
}

h4{
	 position: absolute; 
	  top:680px; 
	  left: 120px;  
}

JavaScript

var step = 1;
var check =  300,
	TimerWalk,start = 0,
	pos = 0,
	stop = 950;
var width = 290,
	limit = 1100, 
	status ="stoped";

$(function() {
	
	  $("#stop").attr("disabled", "disabled");
	  $("#pause").attr("disabled", "disabled");
	  
    $( "#slider-range" ).slider({
        range: true,
        min: start,
        max: stop,
        values: [ start, stop ],
    });
   
    $('#slider').slider({
		//animate: true,
		 min: 100,
	     max: 1000,
	     step:100,
		orientation: 'horizontal',
	
		start: function(event, ui){
		},
		
		slide: function(event, ui){
			check = ui.value;
		},
		stop: function(event, ui){
			if(status == "started")
			animateWalik(limit-check);
		}
	});
    
    $("#start").click(function(){
    	$("#stop").removeAttr("disabled");
    	$("#pause").removeAttr("disabled");
		status = "started";
		animateWalik(limit-check);
		  $("#start").attr("disabled", "disabled");
		
		}
    );

$("#stop").click(function(){
	status = "stoped";
	clearInterval(TimerWalk);
	 $("#start").removeAttr("disabled");
	 $("#stop").attr("disabled", "disabled");
	 $("#pause").attr("disabled", "disabled");
	$("#animatorBox").animate({left:start},0);
	$('#animatorBox').css("background-position","0px 0px");
	}
);

$("#pause").click(function(){
	status = "paused";
	 clearInterval(TimerWalk);
	 $("#start").removeAttr("disabled");
	 }
);

});
var animateWalik = function(interval){
    clearInterval(TimerWalk);
	if(interval != 1000)
	  TimerWalk = setInterval(function() { walk(); },interval);
};
function walk(){
	 	 
	start = $( "#slider-range" ).slider( "values", 0 );
	pos = $('#animatorBox').position().left;	
	stop = $( "#slider-range" ).slider( "values", 1 );
	
	
	if ( pos < (stop-width)) {
			$("#animatorBox").animate({left:'+=20'},100);
	}
	else{
			$("#animatorBox").animate({left:start},0);
	}
	
	    switch(step){
	    case 1:$('#animatorBox').css("background-position","0px 0px"); break;
		case 2:$('#animatorBox').css("background-position","-210px 0px ");...