jQuery 事件 - animate(),change(),stop(),finish()

jQuery animate() 方法

定义和用法

animate() 方法执行 CSS 属性集的自定义动画。

该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。

只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）。

注释：使用 "+=" 或 "-=" 来创建相对动画（relative animations）。

语法

(selector).animate({styles},speed,easing,callback)

参数描述styles必需。规定产生动画效果的一个或多个 CSS 属性/值。

注意： 当与 animate() 方法一起使用时，该属性名称必须是驼峰写法： 您必须使用 paddingLeft 代替 padding-left，marginRight 代替 margin-right，依此类推。

可以应用动画的属性：

• backgroundPositionX
• backgroundPositionY
• borderWidth
• borderBottomWidth
• borderLeftWidth
• borderRightWidth
• borderTopWidth
• borderSpacing
• margin
• marginBottom
• marginLeft
• marginRight
• marginTop
• outlineWidth
• padding
• paddingBottom
• paddingLeft
• paddingRight
• paddingTop
• height
• width
• maxHeight
• maxWidth
• minHeight
• minWidth
• fontSize
• bottom
• left
• right
• top
• letterSpacing
• wordSpacing
• lineHeight
• textIndent

提示：颜色动画不包含在核心 jQuery 库中。如果您想要应用动画颜色，您需要从 jQuery.com 下载 颜色动画插件。speed可选。规定动画的速度。

可能的值：

• 毫秒
• "slow"
• "fast"

easing可选。规定在动画的不同点中元素的速度。默认值是 "swing"。

可能的值：

• "swing" - 在开头/结尾移动慢，在中间移动快
• "linear" - 匀速移动

提示：扩展插件中提供更多可用的 easing 函数。callback可选。animate 函数执行完之后，要执行的函数。

如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。

---

 语法

(selector).animate({styles},{options})

参数描述styles必需。规定产生动画效果的一个或多个 CSS 属性/值（同上）。options可选。规定动画的额外选项。

可能的值：

• speed - 设置动画的速度
• easing - 规定要使用的 easing 函数
• callback - 规定动画完成之后要执行的函数
• step - 规定动画的每一步完成之后要执行的函数
• queue - 布尔值。指示是否在效果队列中放置动画。如果为 false，则动画将立即开始。
• specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射，以及它们的对应 easing 函数

实例

0.停止动画

[javascript] view plain copy

1. if($('.swaplist,.mainlist').is(':animated')){  
2.     $('.swaplist,.mainlist').stop(true,true);  
3. }  

animate实例：
1.点击按钮后div元素的几个不同属性一同变化

[javascript] view plain copy

1. $("#go").click(function () {  
2.     $("#block").animate({  
3.         width: "90%",  
4.         height: "100%",  
5.         fontSize: "10em",  
6.         borderWidth: 10  
7.     }, 1000);  
8. });  

 2.让指定元素左右移动

[javascript] view plain copy

1. $("#right").click(function () {  
2.     $(".block").animate({ left: '+50px' }, "slow");  
3. });  
4. $("#left").click(function () {  
5.     $(".block").animate({ left: '-50px' }, "slow");  
6. });   

3.在600毫秒内切换段落的高度和透明度

[javascript] view plain copy

1. $("p").animate({  
2.     height: 'toggle', opacity: 'toggle'  
3. }, "slow");  

4.用500毫秒将段落移到left为50的地方并且完全清晰显示出来（透明度为1）

[javascript] view plain copy

1. $("p").animate({  
2.     left: 50, opacity: 'show'  
3. }, 500);  

 5.切换显示隐藏

[javascript] view plain copy

1. $(".box h3").toggle(function(){  
2.     $(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");  
3.         $(this).addClass("arrow");  
4.         return false;  
5.    
6.     },function(){  
7.         $(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");  
8.         $(this).removeClass("arrow");  
9.         return false;  
10.     });  
11. });   

[javascript] view plain copy

1. //滚动焦点  
2. $(window).scroll(function () {              //当前窗口的滚动事件  
3. var winTop = $(window).scrollTop();     //获取当前窗口的大小  
4. var objTop = $("#obj1").offset().top;   //获取当前对象的x坐标  
5. });  

jQuery 事件 - change() 方法

定义和用法

当元素的值发生改变时，会发生 change 事件。

该事件仅适用于文本域（text field），以及 textarea 和 select 元素。

change() 函数触发 change 事件，或规定当发生 change 事件时运行的函数。

注释：当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，该事件会在元素失去焦点时发生。

触发 change 事件

触发被选元素的 change 事件。

实例

当输入域发生变化时改变其颜色：

$(".field").change(function(){  $(this).css("background-color","#FFFFCC");});

jQuery 效果 - stop() 方法

定义和用法

stop() 方法停止当前正在运行的动画。

语法

$(selector).stop(stopAll,goToEnd)

参数描述stopAll可选。规定是否停止被选元素的所有加入队列的动画。goToEnd

可选。规定是否允许完成当前的动画。

该参数只能在设置了 stopAll 参数时使用。

第一个参数的意思是是否清空动画序列，为true的话停止的是当前元素的动画效果，为false的话就是停止后面附带的所有动画效果；

第二个参数是是否将当前动画效果执行到最后，意思是如果停止时当前动画的时候动画效果执行了一部分还没执行完，那么停止动画时显示的是此刻的动画效果还是所有动画的结束点的效果，如果想要的是动画执行之后的效果，那么这个参数就为true。否则为false的话动画效果就会停在stop执行的时候

实例

停止当前正在运行的动画：使用.stop()时，停止时的画面会显示此刻动画所执行到的画面。

<script> $(document).ready(function(){  $("#start").click(function(){    $("div").animate({height:300},3000);    $("div").animate({width:300},3000);  });  $("#stop").click(function(){    $("div").stop();  });});</script> 

jQuery finish() 方法

定义和用法

finish() 方法停止当前运行的动画，移除所有排队的动画，并为被选元素完成所有动画。

该方法与 .stop(true,true) 方法类似，不同的是，finish() 也会引起所有排队动画的 CSS 属性停止。

语法

$(selector).finish(queueName)

参数描述queueName可选。规定要停止动画的队列名称。

实例

停止当前正在运行的动画：使用.finish()时，停止时的画面会显示所有动画队列执行完毕的的画面。

<script> $(document).ready(function(){  $("#start").click(function(){    $("div").animate({height:300},3000);    $("div").animate({width:300},3000);  });  $("#complete").click(function(){    $("div").finish();  });});</script>

转自w3school，

http://www.runoob.com/jquery/eff-animate.html

http://www.cnblogs.com/sntetwt/archive/2014/07/10/3835242.html