Linear Timer Animation

by narensrinivasans

HTML

<div id="container">
    <div id="main">
        <div id="bar"></div>
    </div>
</div>

<p id="start">Start</p>
<p id="stop">Stop</p>
<p id="restart">Restart</p>

CSS

#container {
    background: url('https://soundoflife-sennheiser.beta.svn.krds.com/ss/assets/front/img/bg_timer.jpg');
    width: 797px;
    height: 324px;
    overflow: hidden;
}
#main {
    width: 750px;
    margin-left: 47px;
}
#bar {
    background: url('https://soundoflife-sennheiser.beta.svn.krds.com/ss/assets/front/img/bg_timer_status.png');
    width: 86px;
    height: 324px;
    position: relative;
    left: -47px;
}
p {
    background: black;
    color: white;
    cursor: pointer;
    display: inline-block;
    padding: 5px;
}

JavaScript

$('#start').click(function(){
    $('#bar').animate({left: '703px'}, 
    {
    duration: 50000,
    specialEasing: {
      left: "linear"
    },
	});
});

$('#stop').click(function(){
    $('#bar').clearQueue().stop();
});

$('#restart').click(function(){
    $('#bar').clearQueue().stop().animate({left: '-47px'});
});