jQuery学习（四）：动画

基本动画

/*
 - 动画的本质是改变容器的大小和透明度
 - 如果不传参数是看不到动画
 - 可传入特殊的字符  fast normal slow
 - 可传入数字 单位毫秒
*/
//1.显示动画
$('li').show();
//2.隐藏动画
$('li').hide(normal);
//3.切换显示和隐藏
$('li').toggle(1000);

滑入滑出

/*
 - 动画的本质是改变容器的高度
*/
//1.滑入动画
$('li').slideDown();
//2.滑出动画
$('li').slideUp();
//3.切换滑入滑出
$('li').slideToggle();

淡入淡出

/*
 - 动画的本质是改变容器的透明度
*/
//1.淡入动画
$('li').fadeIn();
//2.淡出动画
$('li').fadeOut();
//3.切换淡入淡出
$('li').fadeToggle();
//4.指定结束透明度
$('li').fadeTo('speed','opacity');

自定义动画

/*
 - 参数1：需要做动画的属性
 - 参数2：需要执行动画的总时长
 - 参数3：执行动画的时候的速度 linear / swing
 - 参数4：执行动画完成之后的回调函数
*/
$('#box1').animate({left:800},5000);
$('#box2').animate({left:800},5000,'linear');
$('#box3').animate({left:800},5000,'swing',function () {
	console.log('动画执行完成');
});

动画队列

• jQuery中有个动画队列的机制，当我们对一个对象添加多次动画效果时后添加的动作就会被放入这个动画队列中
• 所有动画需要依次执行
• 如果用户对一个对象频繁操作时不处理动画队列就会造成队列堆积，影响到效果

stop使用

/*
 - stop()会结束当前正在执行的动画，有两个参数
 - 参数一：是否清空动画队列。
	 - true即清空，不执行后续动画
	 - false为不清空，执行后续动画
 - 参数二：是否跳转到当前动画终点。
	 - true即跳转，立即到达终点
	 - false即不跳转，保持当前状态
*/
//1.默认值为两个false，清空动画队列 不跳转到当前动画终点
$('div').stop();
$('div').stop(false,false);
//2.清除动画队列，停止当前动画
$('div').stop(true,false);
//4.清除了动画队列，停止当前动画并且到结束位置  
$('div').stop(true,true);
//5.停止当前动画并且到结束位置  如果动画队列当中还有动画立即执行
$('div').stop(false,true);