<style>#div1{ width:200px; height:200px; background:red;}
#div2{ width:200px; height:200px; background:red; margin-top:10px;}</style>
<body>
<input type="button" value="點選" id="input1">
<div id="div1"></div>
<div id="div2"></div>
</body> <script>//animate() :
//第一個參數 : 對象 {} 去設定樣式屬性和值(目标點)
//第二個參數 : 時間 預設是400
//第三個參數 : 運動形式 隻有兩種 swing(預設 : 緩沖 : 慢快慢) linear(勻速的)
//第四個參數 : 運作結束的回調
$(function(){
$('#input1').click(function(){
$('#div1').animate({
width : 400
},2000,'swing',function(){
alert(123);
});
});
});
</script> 每點選一次，移動固定的值（累加）
<script>function(){
$('#input1').click(function(){
$('#div1').animate({
width : '+=100'
},1000,'linear');
});
});
</script> <script>function(){
$('#input1').click(function(){
$('#div1').animate({
width : 300
},{
duration : 1000,
easing : 'linear',
complete : function(){
//alert(123);
},
step : function(a,b){
//console.log(a);//可以檢測我們定時器的每一次變化
console.log(b.pos); //運動過程中的比例值(0~1)</script> step應用，使某個值在兩秒鐘到達終點
<script>function(){
$('#input1').click(function(){
$('#div1').animate({
num : "move"//任意設定，不可不寫
},{
duration : 2000,
easing : 'linear',
complete : function(){
//alert(123);
},
step : function(a,b){ //可以檢測我們定時器的每一次變化
//console.log(a);
//console.log(b.pos); //運動過程中的比例值(0~1)
$('#div1').html(parseInt(b.pos * 273826678));//兩秒鐘使div1中數字變化到273826678</script> <script>function(){
$('#input1').click(function(){
$('#div1').animate({width : 300},1000).delay(1000).animate({height : 300},1000); //當寬變為300後，等待1000毫秒，再運動高 </script> <script>function(){
$('#input1').click(function(){
$('#div1').animate({width : 300},1000).animate({height : 300},1000);
});
$('#input2').click(function(){
//$('#div1').stop(); //預設情況下 : 隻會停止目前運動
//$('#div1').stop(true); //第一個參數 : 可以停止所有的運動
//$('#div1').stop(true,true); //第二個參數 : 可以停止到指定的目标點(目前的)
$('#div1').finish();//是以運動立即到達終點 </script> ![Spring MVC 自學雜記（五） -- SpringMVC與前台的json資料互動[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)