jquery自定义动画animate.docxVIP

!DOCTYPE html html xmlns=/1999/xhtml head ??meta http-equiv=Content-Type content=text/html; charset=utf-8 / ??title/title ??scriptsrc=jquery-1.11.2.js/script ??style type=text/css ????#box { ??????width: 100px; ??????height: 100px; ??????background-color: red; ????????position:absolute; ????} ??????#pox { ??????width: 100px; ??????height: 100px; ??????background-color: green; ??????position: absolute; ??????top: 200px; ????} ??/style /head body ??input type=button class=button value=开始 /input type=button class=stop value=停止 / ??input type=button class=ani value=查找运动中的动画 / ??????div id=boxbox/div ??div id=poxpox/div /body /html script type=text/javascript ??$(function () { ??????????$(.button).click(function () { ??????$(#box).animate({????????left: 300px? //要想使用left top bottom right这种方向性的属性先必须对#box元素设置CSS 绝对定位??????}) ????}) ??????//自定义动画中，每次开始运动都必须是初始位置或初始状态，而有时我们想通过当前位置或状态下再进行动画。jQuery 提供了自定义动画的累加、累减功能。????$(.button).click(function () { ??????$(#box).animate({????????left: +=50px //每点击一次.button按钮，#box元素就往左移动50px ??????}) ????}) ????????????//-------------------------------------同步动画? ????//一个CSS 变化就是一个动画效果，下面的例子中，已经有四个CSS 变化（分别是width，height，opacity，fontSize的变化）实现了多重动画同步运动的效果。（所谓多重同步运动的效果就是，这四个css属性的值在同一时间，同时变化）??????????$(.button).click(function () { ??????$(#box).animate({????????width: 300px, ????????height: 200px, ????????opacity:0.5, //透明度为0.5 注：透明度的值在0-1之间????????fontSize:200px, //字体大小设为30px ??????}) //第一个参数：是一个对象，他是键值对的css????}) ????//--------------------------------------列队动画? ?????//通过回调函数现实队列动画。（效果就是：首先#box的宽度变为300px 然后高度变为200px,然后透明度变为50%，字体大小变为150px 最后弹出一个“完毕”）????$(.button).click(function () { ??????$(#box).animate({ width: 300px}, 1000, function(){ ????????$(#box).animate({height:200px},1000,function(){ ??????????$(#box).animate({opacity:0.5},1000,function(){ ????????????$(#box).animate({fontSize:150px},1000,function(){alert(完毕)}) ??????????}); ????????}); ??????}); }) //在同一个元素的基础上，使用链式调用也可以实现列队动画????$(.button).click(function () { ??????$(#box) ??????