Jquery. Is there a way to start an animation and stop that animation using the same button?
js:
$('<div>').css({
'width':'200px',
'height':'200px',
'background':'red'
}).appendTo('body')
$('<button>').appendTo('body').text('Click').click(function(){
$('div').animate({
'height': '250px'
})
})
$('button').on('click',function(){
$('div').animate({'height':'350px'})
})
Look at this code;
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style type="text/css">
div {
background-color: #ffeecc;
width: 100px;
height: 100px;
}
</style>
<script type="text/javascript">
$(function () {
var starts = false;
$("#btnStart").click(function () {
if (!starts) {
start();
} else {
stop();
}
});
function start() {
starts = true;
$("#btnStart").val("Stop");
$("#divOne").animate(
{
width: "200px",
height: "300px",
},
5000
);
}
function stop() {
starts = false;
$("#btnStart").val("Start");
$("#divOne").stop();
}
});
</script>
<input id="btnStart" type="button" value="Start" />
<br/><br/>
<div id="divOne" />