※蘭さん：參考官網後，自己改寫成自己看得懂的方式，雖然效果很有趣，不過不知道該用在什麼地方=v="。

//html程式碼
<button id="start2">Start</button>
<button id="stop2">Stop</button>
<div id="move2"></div>

//css程式碼
div#move2 { 
  margin:3px; width:40px; height:40px;
  position:absolute; left:0px; top:80px; 
  background:green; display:none;
 }
div.newcolor { 
  background:blue; border:1px solid #FF0000;  
}

//jquey程式碼
$(function(){
	var defX = parseInt($("#move2").css("left"));
	var defY = parseInt($("#move2").css("top"));
	var moveMaxX = 200;
	var moveMaxY = 200;
	
	$("#start2").click(function () {
		var div = $("#move2");
		var nowX = parseInt(div.css("left"));
		var nowY = parseInt(div.css("top"));
		//計算移動值
		if(div.hasClass('back')){		//表示在回原點時按了停止
			offsetXMoveB = nowX - defX;
			offsetYMoveB = nowY - defY;
		}else{						//表示不是在回原點時按了停止(一般)
			offsetXMove = moveMaxX - nowX;
			offsetYMove = moveMaxY - nowY;
			offsetXMoveB = moveMaxX - defX;
			offsetYMoveB = moveMaxY - defY;
		}
		$("#move2").show("slow");	//顯示
		
		if(div.hasClass('back')){		//回原點的狀態所要做的動畫
		
			if(offsetXMoveB!=0){
				$("#move2").animate({left:'-='+offsetXMoveB},1500,function(){$(this).addClass("newcolor");});
			}
			$("#move2").animate({top:'-='+offsetYMoveB},1500,function(){$(this).removeClass("newcolor").removeClass("back");}); 
			$("#move2").slideUp();
			
		}else{						//不是回原點的狀態所要做的動畫
		
			if(offsetXMove!=0){
				$("#move2").animate({left:'+='+offsetXMove},1500,function(){$(this).addClass("newcolor");});
			}
			if(offsetYMove!=0){
				$("#move2").animate({top:'+='+offsetYMove},1500,function(){$(this).removeClass("newcolor").addClass("back");});
			}
			$("#move2").animate({left:'-='+offsetXMoveB},1500,function(){$(this).addClass("newcolor");});
			$("#move2").animate({top:'-='+offsetYMoveB},1500,function(){$(this).removeClass("newcolor").removeClass("back");}); 
			$("#move2").slideUp();
		}
	});
	$("#stop2").click(function () {
		$("div").queue("fx", []);			//清空動畫陣列
 		$("#move2").stop();				//動畫停止，因動畫陣列清除故不會往下一個動作
	});
});

jquey動畫處理範例