jQuery动画
一、动画
1.1、隐藏和显示
hide()
//宽、高、opacity改变
//当宽高opacity(不透明度)都到0时，标签属性display：none
//hide方法的参数：可以是以毫秒为单位的数值类型，也可以是'slow''normal''fast'
show();原理同上.
1.2、淡入淡出
fadeIn()
fadeOut()
fadeToggle
//通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。
1.3、滑动
slideUp()
slideDown()
slideToggle()
//通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。
1.4、自定义动画以及回调函数的应用
$(document).ready(function(){
$('button').click(function(){
startA();
function startA(){
$('#div1').animate({width:300,height:300,borderRadius:150,opacity:0.5,left:'500px'},3000,function(){
$(this).css("background","green");
});
$('#div').animate({width:100,height:100,borderRadius:50,opacity:0.8,left:'0px'},2000,function(){
$(this).css("background","red");
});
$('#div1').animate({width:600,height:600,borderRadius:300,opacity:0.2},3000,startA);
}
});
});
二、动画及其他相关属性和方法
2.1、停止元素的动画
stop():
$(function(){
$('#div1').hover(function(){
$(this).stop(true,true);
$(this).animate({width:'500px'},3000).animate({height:"500px"},3000);
},
function(){
$(this).stop(true,true);
$(this).animate({width:'100px'},3000).animate({height:'100px'},3000);
})
//笔记
//stop()
//stop(true)只有一个布尔值参数，该参数清空当前动画队列.
//stop(true,true)有两个布尔值参数，第一个是清空动画队列，第二个为true表示让当前未执行完的动画直接到达执行完时的样式。
})
**clearQueue**:如果设置成true，则清空队列。可以立即结束动画。
** gotoEnd**:让当前正在执行的动画立即完成，并且重设show和hide的原始样式，调用回调函数等。
2.2、判断元素是否处于动画状态
is(':animated')
$('button').click(function(){
//判断当前标签是否有动画在执行，如果有，则不再执行新动画
//累加、类减：在数值前添加一个+=或-=符号
//.is()用来判断事件、状态是否正在发生。如果正在发生，返回true；通过传递":animated"参数用来判断当前标签是否在执行动画
if (!$('#div1').is(':animated')) {
// alert('别急嘛，正在动')
$('#div1').animate({width:'+=200px'},2000);
}
});
2.3、延迟动画
delay();//设置一个延时来推迟执行队列中之后的项目。
