jQuery对象的动画处理

浏览数：26 / 时间：2015年06月09日

<!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></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></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>