jQuery对象的动画处理

时间：2014-12-20 19:34:12 阅读：166 评论：0 收藏：0 [点我收藏+]

标签：

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

jQuery对象的动画处理

标签：

原文地址：http://www.cnblogs.com/yishujiayuan/p/4175725.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行