jQueryオブジェクトのアニメーション処理


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery.min.js"  type="text/javascript" ></script>
<link rel="stylesheet" href="selector.css"  />
<title>jQuery Selector</title>
</head>

<body>
<div id="mf" class="mf">
    <div><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p></div>
    <div><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p></div>
    <div><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p></div>
    <div><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p></div>
    <div><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p></div>
    <div><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p></div>
    <div><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p></div>
    <div><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p></div>
    <div><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p></div>
</div>

<button id="btn1" class="btn">STOP</button>
<button id="btn2" class="btn">LOOP</button>
<script>

 $(document).ready(function(){
 
 		/*var modalMarginTop = ($('#mf').height() + 80) / 2;  
        var modalMarginLeft = ($('#mf').width() + 80) / 2;  

        $('#mf').css({  
            'margin-top' : modalMarginTop,  
            'margin-left' : modalMarginLeft  
        });  */
		for (i=0;i<9;i++){
			$("div p:eq("+i+")").addClass("highlight");
			//.delay(2000);
		}
		
		$("p").animate({"left":"+=400px"},2000)
			  .animate({"top":"+=200px"},2000)
			  .animate({"left":"-=400px"},2000)
			  .animate({"top":"-=200px"},2000);
		
 /*
 stop(clearQueue,jumptoEnd)
 【param】    clearQueue            ;
 【param】    jumptoEnd                  ;
 */
  $("#btn1").click(function(){
	 $("p").stop(true,true);
 })
 
 /*
 * animate()         。
 *              ,      。
 */
  $("#btn2").click(function(){
	  function loop(){
		  $("p").animate({"left":"+=400px"},2000)
				.animate({"top":"+=200px"},2000)
				.animate({"left":"-=400px"},2000)
				.animate({"top":"-=200px"},2000,function(){loop();$("p:eq(12)").css({"background-color":"red"})});
	  };
	  loop();
  });
  
  $(window).unload(function(){
	 alert("are you sure to leave there!");
  });
	 
 });
</script>
</body>
</html>