jquery 动画总结（主要指效果函数）

动画无非两类：帧动画frame和变形动画tween，以及3d动画。不论web还是安卓苹果app，动画原理都是这些。

web app 动画实现的途径，无非这几种：
1 gif动画---这就是帧动画，把若干图片按时间顺序串起来。gif不能为程序控制，主要应用在固定的重复动画效果。
2 flash动画---可做复杂绚丽的动画，并可使用脚本。曾几何时flash在2000年左右火的一塌糊涂。随着html5的发展，相信flash市场份额会继续下滑。
3 css动画---一般的动画效果配合，css3+html5可做很多动画效果，但是也容易消耗内存，使浏览器出现卡顿现象。
4 脚本动画---也是这篇主要研究的jquery效果总结，可以通过程序控制动画，画质比gif要好很多。
5 html5动画---html5+非常强大，也是webapp的未来。真有一统江湖的感觉。

jQuery动画效果，在w3school.com.cn学习课程中是这几项

jQuery 隐藏/显示---hide() show()
jQuery 淡入淡出---fadeIn()从隐藏到可见, fadeOut()从可见到隐藏 ,fadeTo()把被选元素逐渐改变至给定的不透明度
jQuery 滑动---slideDown()slideUp()slideToggle()
jQuery 动画---animate() 方法用于创建自定义动画
　　语法： $(selector).animate({params},speed,callback);
　　必需的 params 参数定义形成动画的 CSS 属性。
　　可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
　　可选的 callback 参数是动画完成后所执行的函数名称。
　　animate() - 使用相对值,需要在值的前面加上 += 或 -=
　　animate() - 使用预定义的值,可以把属性的动画值设置为 "show"、"hide" 或 "toggle"
　　animate() - 使用队列功能,彼此之后编写多个 animate() 调用，逐一运行这些 animate 调用
jQuery stop()---stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
　　语法: $(selector).stop(stopAll,goToEnd);
　　可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
　　可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
　　因此，默认地，stop() 会清除在被选元素上指定的当前动画。
jQuery Callback---当动画 100% 完成后，即调用 Callback 函数。
　　典型的语法：$(selector).hide(speed,callback)
　　callback 参数是一个在 hide 操作完成后被执行的函数。
jQuery Chaining---Chaining 允许我们在一条语句中允许多个 jQuery 方法（在相同的元素上）。这样的话，浏览器就不必多次查找相同的元素。语法上也简洁优雅。
　　例如：$("#p1").css("color","red").slideUp(2000).slideDown(2000);

在参考手册中jQuery 效果函数
方法　　 描述
animate() 对被选元素应用“自定义”的动画
clearQueue() 对被选元素移除所有排队的函数（仍未运行的）
delay() 对被选元素的所有排队函数（仍未运行）设置延迟
dequeue() 运行被选元素的下一个排队函数
fadeIn() 逐渐改变被选元素的不透明度，从隐藏到可见
fadeOut() 逐渐改变被选元素的不透明度，从可见到隐藏
fadeTo() 把被选元素逐渐改变至给定的不透明度
hide() 隐藏被选的元素
queue() 显示被选元素的排队函数
show() 显示被选的元素
slideDown() 通过调整高度来滑动显示被选元素
slideToggle() 对被选元素进行滑动隐藏和滑动显示的切换
slideUp() 通过调整高度来滑动隐藏被选元素
stop() 停止在被选元素上运行动画
toggle() 对被选元素进行隐藏和显示的切换

行胜于言！学习方法都需要实践演练才能掌握。马上示例Demo：Demo实现了领取奖励（红包）时的一个简单的动画，先是从小到大，然后抖动，最好显示红包金额。
有图胜万言。



1、---先说html div---
<div class="a44 ">
<div class="a441 vpbg "></div>
</div>
<div class="a45">
<div class="a451 vpbg ">
<div class="a4513">
<span id="num"> </span>元
</div>
</div>
</div>

2、---再说样式---
/* 领取奖励 */
.a44 { position:absolute; top:0%; left:0%; width:100%; height:100%; z-index:1010; display:none; }
.a441 { position:relative; margin-top:222px; width:470px; height:282px; background-image:url('../img/act2/a6/redbag1.png'); }
.a45 { position:absolute; top:0%; left:0%; width:100%; height:100%; z-index:1010; display:none; }
.a451 { position:relative; margin-top:0px; width:653px; height:592px; background-image:url('../img/act2/a6/redbag2.png'); }
.a4513 { width:100%; padding-top:200px; color:#fff799; font-size:2rem; text-align:center; }
.a4513 span{ font-size:4rem; font-weight:bold; }
/* 复用 邀请透明层 */
.a91 { position:fixed; top:0%; left:0%; width:100%; height:200%; background:rgba(0, 0, 0, 0.8) none repeat scroll 0 0!important; filter:Alpha(opacity=80); background:#000000; z-index:1000; display:none; }
.a92 { position:fixed; top:0%; left:0%; width:100%; height:100%; z-index:1010; display:none; }
.a921 { width:800px; height:600px; background-image:url('../img/user/invite.png'); }

3、---jquery动画---

<script type="text/javascript">

$(function(){
　　$('.a45').click(function(){
　　　　$('.a91').hide();
　　　　$('.a45').hide();
});
//领取满分奖励
$('#getRedBag').click(function(){
　　getWin();
});
//初始化成小图
$('.a441').animate({'width': '5.825%',height:'2.5%','margin-top':'31.89%'}, 0);

//动画test
//tween();
//setTimeout(function(){
// shake($('.a44'));
// },1000);

});
//动画小变大
function tween(){
$('.a441').animate({'width': '5.825%','height':'2.52%','margin-top':'31.89%',opacity:'1.0',}, 0);
$('.a91').show();
$('.a44').show();
$('.a441').animate({'width': '58.25%','height':'25.2%','margin-top':'19.5%',opacity:'1.0',},600);
}
//动画微旋抖动
function shake(t) {
t.addClass('shake shake-slow shake-constant');
setTimeout(function() {
t.removeClass('shake-constant');
$('.a44').hide();
$('.a91').show();
$('.a45').show();
}, 870);
}

</script>

//备注说明：
1、$(selector).animate({params},speed,callback);动画的callback没有试验成功，一个动画完结，下个动画并没有开始，而是两个动画一并执行了。为什么是这样，我还没弄明白。留待以后研究吧。
2、抖动动画，结合了css样式shake shake-slow shake-constant
3、关于时间方面，有两个函数可用。
setTimeout(function() {动画;},ms); //setTimeout函数是执行ms时长后结束,ms是毫秒。
setInterval(动画, 1500);//以1.5秒的频率，反复执行动画。
//动画效果--左右晃动
var changeDivPosition = function(){
$('.a12 img').animate({'left': '1.5%'}, 600).animate({'left': '0%'}, 600);
};
changeDivPosition();
objSetInter = setInterval(changeDivPosition, 1500);

分享即学习，分享即成长。通过学习大牛们的博文，我也学会了以最大的诚意分享自己所学。一个人思路难免狭隘，对出现的错误，欢迎读过的朋友拍砖纠正一二。