jQuery使用相同的按钮启动和停止动画

Question

Jquery。有没有一种方法可以使用相同的按钮启动动画并停止该动画？

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'})
})

Answer 1

看看这段代码；

<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" />