首页 > 代码库 > jQuery对象的动画处理

jQuery对象的动画处理

2024-08-09 02:00:00   212人阅读

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    2. <html xmlns="http://www.w3.org/1999/xhtml">  
    3. <head>  
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    5. <script src=http://www.mamicode.com/"jquery.min.js"  type="text/javascript" ></script>  
    6. <link rel="stylesheet" href=http://www.mamicode.com/"selector.css"  />  
    7. <title>jQuery Selector</title>  
    8. </head>  
    9.   
    10. <body>  
    11. <div id="mf" class="mf">  
    12.     <div><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p></div>  
    13.     <div><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p></div>  
    14.     <div><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p></div>  
    15.     <div><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p></div>  
    16.     <div><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p></div>  
    17.     <div><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p></div>  
    18.     <div><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p></div>  
    19.     <div><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p></div>  
    20.     <div><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p></div>  
    21. </div>  
    22.   
    23. <button id="btn1" class="btn">STOP</button>  
    24. <button id="btn2" class="btn">LOOP</button>  
    25. <script>  
    26.   
    27.  $(document).ready(function(){  
    28.    
    29.         /*var modalMarginTop = ($(‘#mf‘).height() + 80) / 2;    
    30.         var modalMarginLeft = ($(‘#mf‘).width() + 80) / 2;    
    31.   
    32.         $(‘#mf‘).css({    
    33.             ‘margin-top‘ : modalMarginTop,    
    34.             ‘margin-left‘ : modalMarginLeft    
    35.         });  */  
    36.         for (i=0;i<9;i++){  
    37.             $("div p:eq("+i+")").addClass("highlight");  
    38.             //.delay(2000);  
    39.         }  
    40.           
    41.         $("p").animate({"left":"+=400px"},2000)  
    42.               .animate({"top":"+=200px"},2000)  
    43.               .animate({"left":"-=400px"},2000)  
    44.               .animate({"top":"-=200px"},2000);  
    45.           
    46.  /*  
    47.  stop(clearQueue,jumptoEnd)  
    48.  【param】  参数clearQueue代表是否清空未执行的队列；  
    49.  【param】  参数jumptoEnd代表直接将正在执行的动画跳转到末状态；  
    50.  */  
    51.   $("#btn1").click(function(){  
    52.      $("p").stop(true,true);  
    53.  })  
    54.    
    55.  /*  
    56.  * animate()方法中使用回调函数。  
    57.  * 对象的一系列动画执行完成后，调用回调函数。  
    58.  */  
    59.   $("#btn2").click(function(){  
    60.       function loop(){  
    61.           $("p").animate({"left":"+=400px"},2000)  
    62.                 .animate({"top":"+=200px"},2000)  
    63.                 .animate({"left":"-=400px"},2000)  
    64.                 .animate({"top":"-=200px"},2000,function(){loop();$("p:eq(12)").css({"background-color":"red"})});  
    65.       };  
    66.       loop();  
    67.   });  
    68.     
    69.   $(window).unload(function(){  
    70.      alert("are you sure to leave there!");  
    71.   });  
    72.        
    73.  });  
    74. </script>  
    75. </body>  
    76. </html> 

jQuery对象的动画处理


联系
我们