jQuery对象的动画处理

来源：互联网发布：软件instagram下载编辑：程序博客网时间：2024/05/16 14:12
<!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>
0 0