jQuery基础动画篇

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();//设置一个延时来推迟执行队列中之后的项目。