jQuery动画基础

1.动画DOM及其CSS操作
原理：以固定的时间间隔（例如，0.1秒），每次DOM元素的CSS样式修改一点（例如，高宽各增加10%）

2.自定义动画
animate() 可以实现任意动画效果，需要传递的参数是DOM元素最终的CSS状态和持续时间（ms，可选参数）
通过CSS样式将元素从一个状态改变为另一个状态
只有数字值可以创建动画（比如"margin:30px"），字符串值无法创建动画（比如"background-color:red"）

var div = $('#test-animate');
div.stop().animate({//由于动画有持续时间，为防止操作过快，先通过stop()方法结束原有动画再开始新动画
	opacity:0.25,//如果属性值是数值，可以不添加引号，如果属性值中有字符，需要添加引号，否则报错不能生效
	width:'256px',//如果只输入256，不加引号也可以，默认单位是px
	height:'256px',
	fontSize:'16px'//注意使用驼峰形式
},3000);//以对象方式传入css参数，原本应该定义过不同的属性值才能产生变化

delay() 实现动画暂停（延迟）

//链式动画
$('div').stop()
.animate({'width':'0%'},1000)
.delay(3000)//将之后的动画延迟播放
.animate({'width':'100%'},1000);

3.动画函数
show()/hide()
直接以无参数形式调用show()和hide()，会显示和隐藏DOM元素，但只要传递一个时间参数进去，就变成了动画（同时改变透明度和宽高）
show()适用于通过jQuery（hide()、fadeOut()、slideUp()）隐藏的元素，或者CSS中声明display:none的元素（不适用visibility:hidden的元素）

var div = $('#test-animate');
div.stop().hide(3000);//在3秒钟内逐渐消失

show( fast | normal | slow)
也可以传入三个关键字，从左到右速度变慢

toggle( fast | normal | slow) --作用于单个元素
根据当前状态决定是show()还是hide()

$('div').stop().toggle('slow');//如果当前元素是显示的，就将它隐藏；如果是隐藏的，就将它显示；同样有三个关键字；同时改变透明度和宽高

fadeIn( fast | normal | slow)/fadeOut( fast | normal | slow)
动画淡入淡出，通过不断设置DOM元素的opacity属性实现
fadeIn()适用于通过jQuery（hide()、fadeOut()、slideUp()）隐藏的元素，或者CSS中声明display:none的元素（不适用visibility:hidden的元素）

$('div').stop().fadeIn('slow');

fadeToggle( fast | normal | slow)–作用于单个元素
根据元素是否可见决定下一步动作

$('div').stop().fadeToggle('slow');//如果当前元素是显示的，就将它隐藏；如果是隐藏的，就将它显示；同样有三个关键字；只改变透明度

slideUp( fast | normal | slow)/slideDown( fast | normal | slow)
在垂直方向逐渐收缩或展开，控制高度和透明度，不控制宽度
slideDown()适用于通过jQuery（hide()、fadeOut()、slideUp()）隐藏的元素，或者CSS中声明display:none的元素（不适用visibility:hidden的元素）

$('div').stop().slideUp('slow');//消失
$('div').stop().slideDown('slow');//显示

slideToggle( fast | normal | slow)
根据当前状态决定收缩还是展开

以上均可以传入时间或关键字

4.计时器
setTimeout(fn,time)
等待一段时间后调用一次函数，只调用一次！
第一个参数为处理函数，time为延迟时间

var swiper = function(){
	...
	setTimeout(swiper,1000);//每隔一秒钟调用自己，死循环
}
setTimeout(swiper,1000);//实际只会执行一次

定时器中函数名不需要加引号

var timer = null;//先定义一个空变量
var slide = function(){
	$('img').stop().slideToggle(1000);
    timer = setTimeout(slide,2000);//将计时器赋值给空变量，此时并不会影响无限循环
}
$('.obj').click(function(){
    slide();
    clearTimeout(timer);//通过变量清除计时器，打破无限循环--实际是只让函数的第一句发挥作用
});

setInterval(fn,time)
每隔一段时间就调用一次函数，循环调用
fn同样可以是匿名函数，也可以是函数名（不要引号）
time为延迟时间，从第一次执行时就要延迟

var slide = function(){
    $('img').stop().slideToggle(1000);
}
$('.obj').click(function(){
    setInterval(slide,1000);//循环调用函数
});

var slide = function(){
    $('img').stop().slideToggle(1000);
}
$('.obj').click(function(){
    var timer = setInterval(slide,1000);
    clearInterval(timer);//终止方法一致，相当于一次都不调用
});