jQuery 动画与停止动画效果实例详解
本文实例讲述了jQuery动画与停止动画效果。分享给大家供大家参考，具体如下：
jQuery动画-animate()方法
jQueryanimate()方法用于创建自定义动画。
语法：
$(selector).animate({params},speed,callback);
- 必需的params参数定义形成动画的CSS属性。
- 可选的speed参数规定效果的时长。它可以取以下值："slow"、"fast"或毫秒。
- 可选的callback参数是动画完成后所执行的函数名称。
下面的例子演示animate()方法的简单应用。它把
$("button").click(function(){
$("div").animate({left:'250px'});
});
jQueryanimate()-操作多个属性
请注意，生成动画的过程中可同时使用多个属性：
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
lamp 可以用animate()方法来操作所有CSS属性吗？
是的，几乎可以！不过，需要记住一件重要的事情：当使用animate()时，必须使用Camel标记法书写所有的属性名，比如，必须使用paddingLeft而不是padding-left，使用marginRight而不是margin-right，等等。
同时，色彩动画并不包含在核心jQuery库中。
如果需要生成颜色动画，您需要从jquery.com下载颜色动画插件。
jQueryanimate()-使用相对值
也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上+=或-=：
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
jQueryanimate()-使用预定义的值
甚至可以把属性的动画值设置为"show"、"hide"或"toggle"：
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
jQueryanimate()-使用队列功能
默认地，jQuery提供针对动画的队列功能。
这意味着如果在彼此之后编写多个animate()调用，jQuery会创建包含这些方法调用的"内部"队列。然后逐一运行这些animate调用。
$("button").click(function(){
vardiv=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
下面的例子把
$("button").click(function(){
vardiv=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
jquery中有一个Queue队列的接口，这个模块没有单独拿出来作为一个章节是因为这个是内部专门为动画服务的，Queue队列如同data数据缓存与Deferred异步模型一样，都是jQuery库的内部实现的基础设施
Queue队列
队列是一种特殊的线性表，只允许在表的前端（队头）进行删除操作（出队），在表的后端（队尾）进行出入操作（入队），队列的特点是先进先出，最先插入的元素最先被删除。
为什么要引入队列
vara=1;
setTimeout(function(){
a=2;
},0)
alert(a);
我们一直习惯于线性的编写代码逻辑，但是在JavaScript编程几乎总是伴随着异步操作：
setTImeout，css3Transition/Animation,ajax,dom的绘制，postmessage，webDatabase等等，大量异步操作所带来的回调函数会把我们的算法分解，对于“异步+回调”的模式，怎么“拉平”异步操作使之跟同步一样，因为异步操作进行流程控制的时候无非避免的要嵌套大量的回调逻辑，所以就会出现promises约定了。
那么jQuery引入队列其实从一个角度上可以认为：允许一系列函数被异步地调用而不会阻塞程序。
看一个代码段：
$("#Aaron").slideUp().fadeIn()
这是jQuery的一组动画链式序列，它的内部其实就是一组队列Queue，所以队列和Deferred地位类似，是一个内部使用的基础设施。
- 当slideUp运行时，fadeIn被放到fx队列中
- 当slideUp完成后，从队列中被取出运行
Queue函数允许直接操作这个链式调用的行为，同时Queue可以指定队列名称获得其他能力而不局限于fx队列。
jQuery提供了2组队列操作的API：
jQuery.queue/dequeue
jQuery.fn.queue/dequeue
但是不同与普通队列定义的是：
- jQuery.queue和jQuery.fn.queue不仅执行出队操作返回队头元素，还会自动执行返回的队头元素
- fn是扩展在原型上的高级API是提供给实例使用的
- .queue/.dequeue其内部是调用的.queue，.dequeue静态的底层方法实现入列与出列
jQuerystop()方法
jQuerystop()方法用于停止动画或效果，在它们完成之前。
stop()方法适用于所有jQuery效果函数，包括滑动、淡入淡出和自定义动画。
语法:
$(selector).stop(stopAll,goToEnd);
- 可选的stopAll参数规定是否应该清除动画队列。默认是false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
- 可选的goToEnd参数规定是否立即完成当前动画。默认是false。
因此，默认地，stop()会清除在被选元素上指定的当前动画。
下面的例子演示stop()方法，不带参数：
$("#stop").click(function(){
$("#panel").stop();
});
动画队列停止动画测试，只停止当前正在进行的动画，停止当前动画后，队列中的下一个动画开始进行：
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown(5000);
$("#panel").slideUp(5000);
});
$("#stop").click(function(){
$("#panel").stop();
});
});
可以在stop()中设置stopAll的参数为true，这样就可以停止所有动画效果而不是只停止当前动画：
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown(5000);
$("#panel").slideUp(5000);
});
$("#stop").click(function(){
$("#panel").stop(true);
});
});
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于jQuery相关内容还可查看本站专题：《jQuery动画与特效用法总结》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。