[TOC] # 动画方法 **注意** 用户频繁触发带有动画效果的元素的动画，触发的次数会被记录下来，直到所有的动画执行完毕为止--JQuery的动画列队现象 可以用stop()清除动画列队，放在动画函数之前调用（动画函数有slideUp，slideDown，show，hide） **若stop()无法清除干净动画列队，可以传入 个true参数，硬性清除** ``` $(".nav>ul>li").hover(function () {/*鼠标的离开和进入可以当做是显示隐藏的切换效果*/ $(this).children("ul").stop().slideToggle(); }); ``` ## 1.常用的方法 ### 1.动画 #### 1.1 显示 和隐藏 以及切换 对角线方向发生的动画效果 ***** show() 显示（参数写数字代表动画出现过渡） hide（） 隐藏 toggle() 显示隐藏切换 #### 1.2滑动动画 滑动动画 -----------竖直方向上的动画效果 **给做动画的外面盒子一个高度，布局稳定** ***** slideDown() 滑动显示（向下） slideUp（） 滑动隐藏 （向上） slideToggle（） 滑动显示隐藏切换 ***** **注意** 在直接操作图片img滑动显示隐藏时，需要去给img一个给定的宽，不然会变成对角线上的变化 ，同时需要把img转换为块级元素 ***** #### 1.3淡入淡出动画（透明度动画） $().fadeIn() 淡入 $().fadeout() 淡出 $().fadeToggle() 切换 $().fadeTo(时间，透明度) 需要多少时间（毫秒）透明到多少 #### 1.4自定义动画 animate(params,speed,easing,callBack) a. params是一个对象。在该对象中以键值对的方式来要控制的属性样式和对应的值表示 （去掉双引号的话属性要用驼峰命名，不用单位） ****animate动画只能实现属性值是数字的动画效果 z-index 不可以作动画***** b. speed 控制速度，可以是默认字符串中的某个（“slow” “normal” “fast”）可以自定义数字，1000为一毫秒 c. easing 控制动画的表现效果，通常有 linear(匀速) 和swing 等固定值。(swing为默认值) d. callBack 动画执行完毕后的回调函数 ```javascript $("button").eq(0).click(function () { $("div").animate( { width:"+=400", "height":"400px", marginTop:100, borderRadius :50, fontSize:20, textIndent:40, },1000,'linear',function () { alert("我完成动画了"); }); }) ``` ***** **JQuery所提供的其他动画函数也有这后面三个参数** ``` $("div").show(1000,"linear",function(){ alert("动画执行结束了") }); ``` #### 1.5 延迟 delay() 让后面的动画函数延迟时间执行 ### 2.1获取索引值 jq给每个元素进行编号（索引值），从0开始 ------同级状态有关系，与本身是什么标签没有关系 $().index() 获取索引值 ### 2.2 类的控制 #### 2.2.1添加类 $().addClass() ----可以同时添加多个类 #### 2.2.2删除类 $().removeClass() -----不写参数表示删除所有的类名，有参数则为指定删除类名 #### 2.2.3切换类 $().toggleClass() -------切换类（有就删除，无则添加）