jQuery涉及动画效果的使用

今日主打

  Ⅰ、动画DOM及其CSS操作

    原理就是我们只需要以固定的时间间隔，每次DOM元素的CSS样式修改一点，(例如，每隔0.1秒，高宽各增加10%)，然后效果出来后看起来就像动画了。

小栗子来啦~~睁大眼睛，请看下面代码图以及效果图（今天小仙女非常滴认真哦）：

代码 动画前效果图                       加动画后效果图

Ⅱ、自定义动画

    amimate()是一个函数，可以实现任意动画效果，需要传递的参数是DOM元素最终的CSS状态和时间 

  eg: var div=$('#test-animate');

      div.animate({opacity:0,25,

                            width:'256px',

                            height:'256px'},3000);

  delay()方法可以实现动画暂停。

  Ⅲ、jQuery封装的动画函数

    ① 第一类动画函数

       ⑴ show 显示 / hide 隐藏         直接以无参形式调用show()和hide()，会显示和隐藏DOM元素，                                                          但是只要传递一个时间参数进去，就变成了动画。

      eg: var div=$('#test-show-hide');

            div.hide(3000); // 在3秒内逐渐消失

       ⑵ toggle()方法是根据当前状态决定 

                      也就是如果当前显示的是show，就会用hide；如果当前显示的是hide，就会用show。

  ② 第二类动画函数  重点

       ⑴ fadeIn()，fadeOut()方法是淡入淡出

                             也就是通过不断的设置DOM元素的opacity属性来实现的 只控制透明度。

       ⑵ fadeToggle()方法根据元素是否可见来决定下一步动作。

    ③ 第三类动画函数

      ⑴ slideUp() / slideDown()      在垂直方向逐渐展开或收缩，只控制高度

      ⑵ slideToggle()方法根据元素是否可见来决定下一步动作

注意：

    show  /  hide  不控制宽高和透明度 

    fadeIn() /  fadeOut()  不控制宽高，只控制透明度 

    slideUp() / slideDown()  只控制高度和透明度，不控制宽度

  Ⅳ、计时器           【注意：定时器中函数名不需要加引号】

    clearTimeout() 清除定时器

  两种定时器的本质区别：

    setTimeout()  等待几秒后调用

    setInterval()  每隔几秒调用一次