jQuery动画

一、动画：

1、显示和隐藏（实际是修改标签的display值）

hide（）：隐藏   

show（）：显示    

2、淡入淡出

fadeln（）：dispaly变为none，颜色淡入，直到完全透明；

fadeOut（）：颜色变为透明，display变为block；

fadeToggle（）：反复在淡入和淡出之间切换；

3、滑动

slideUp（）：标签从下到上收起，直到高度为0，display变为none；

slideDown（）：高度增加，display变为block；

slideToggle（）：反复在增高、变矮之间切换；

以上由jquery封装的简单动画都可以传一个参数，参数为以毫秒为单位的数值

4、自定义动画：可以使用jquery提供的animate（）方法来进行自定义动画

element.animate（p，s，c）：

p参数：包含样式属性以及属性值的对象类型数据；

s参数：动画执行的时间，可写可省；

c参数：动画执行完毕后的回调函数，当动画执行完毕后会执行作为参数传递进去的函数，任何一个动画都可以传一个函数作为回调函数，可写可省；

$('#div1').animate({width:'500px'},2000,function(){

alert('变化成功')；

})  //表示ID为div1的标签在2000毫秒内，宽度变为500；‘变化成功’将会在2000毫秒后动画执行完毕后弹出；

动画也可以同时执行多个动画（同时又多个属性值发生变化）

$(‘#div’).animate({

height : '100px',

width：'500px’      

//此处同时执行宽和高的变化动画

}, 2000).animate({

//此处可使用链式语法，当上个动画执行完毕后，按顺序执行后面的多个动画

width : '100px'

}, 2000);

二、动画其他相关方法和属性

1、停止元素的动画：可以使用stop（）方法；

当stop（）无参时，停止动画，元素样式保持触发stop（）方法时的状态；

例子如下：

当stop（true）：有一个bool类型的参数，这个参数表示清除当前队列中的动画（clearQueue）；

例子如下：

当stop（true，true）：有连个参数，第一个参数表示清空当前队列中的动画（clearQueue）；第二个参数表示当前未执行完的动画达到执行完毕的样式（toEnd）。常用于在第二个动画需要接在第一个动画执行完毕后状态后执行的场景中；

例子如下：

2、判断元素是否处于动画状态

$(element).is(':animated')：该方法用于判断元素是否处于动画中，返回值是一个布尔类型的值，为了避免动画叠加导致的效果混乱，只有在当前标签没有执行动画效果时才会继续添加新动画；

3、延迟动画

在动画执行过程中，如果需要让队列中的动画做延迟执行操作，可以使用 delay（）方法处理，该方法参数是一个毫秒单位的数值

jq的动画先介绍到这里，如果对您有所帮助的话，请点赞并关注哦，我会不定时的更新一下自己学习的经验以及见解，和大家进行交流。

您赞就是是我最大的动力！！！