jQuery动画与效果

1 显示与隐藏元素

1.1 显示元素

很多时候，有些比较细节性的信息开始的时候没有必要让用户看到，可以让用户想要查看的时候再显示出来。传统的处理方式是转向到另外一个页面进行显示，这样就使用户离开了先前的页面，而这可能并不是用户想要的。

jQuery中用来显示已经被隐藏的元素的方法是使用show(speed,[callback])函数。

函数名	show(speed,[callback])
作用	以动画显示所有匹配的元素，并在显示完成后可选地触发一个回调函数。可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度
返回值	jQuery
参数	speed (String,Number)：三种预定速度之一的字符串(“slow”, “normal”, or “fast”)或表示动画时长的毫秒数值(如：1000) callback (Function)：在动画完成时执行的函数，每个元素执行一次

1.2 隐藏元素

经常会在网站上见到这种效果，某些需要显示给用户的信息，可能在用户看过之后就不需要再留在页面上了。一般的处理方式是在这种元素旁边多一个按钮，由用户决定是否将该元素在页面上隐藏。

函数名	hide(speed,[callback])
作用	以动画隐藏所有匹配的元素，并在显示完成后可选地触发一个回调函数。可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度
返回值	jQuery
参数	speed (String,Number)：三种预定速度之一的字符串(“slow”, “normal”, or “fast”)或表示动画时长的毫秒数值(如：1000) callback (Function)：在动画完成时执行的函数，每个元素执行一次。

示例：点击“显示图片”按钮显示图片，点击“隐藏图片”按钮隐藏图片

    <button id="btn1">显示图片</button>
    <button id="btn2">隐藏图片</button><br>
    <img src="./images/p1.jpg" id="img" width="200">
    <script>
        $(function () {
            $("#btn1").bind("click", function () {
                $("#img").show(1000);
            })
            $("#btn2").bind("click", function () {
                $("#img").hide(1000);
            })
        })
    </script>

1.3 交替显示元素

jQuery中用于实现交替显示隐藏的函数是toggle(speed,[callback]) 。

函数名	toggle(speed,[callback])
作用	以的动画切换元素的可见状态。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的
返回值	jQuery
参数	speed (String,Number)：三种预定速度之一的字符串(“slow”, “normal”, or “fast”)或表示动画时长的毫秒数值(如：1000) callback (Function)： 在动画完成时执行的函数，每个元素执行一次

示例：点击同一个按钮，控制图片的出现与隐藏

    <button id="btn1">交替显示图片</button><br>
    <img src="./images/p1.jpg" id="img" width="200">
    <script>
        $(function () {
            $("#btn1").bind("click", function () {
                $("#img").toggle(1000);
            })
        })
    </script>

2 滑动效果

2.1 向上收缩效果

所谓向上收缩效果就是对页面元素通过高度变化（向上减小）来动态地隐藏。在jQuery中实现该效果的函数是slideUp(speed,[callback]) 。

函数名	slideUp(speed,[callback])
作用	通过高度变化来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。
返回值	jQuery
参数	speed (String,Number)：三种预定速度之一的字符串(“slow”, “normal”, or “fast”)或表示动画时长的毫秒数值（如1000） callback (Function)： 在动画完成时执行的函数，每个元素执行一次

示例：点击按钮收缩图片。

    <button id="btn1">收缩图片</button><br>
    <img src="./images/p1.jpg" id="img" width="200">
    <script>
        $(function () {
            $("#btn1").bind("click", function () {
                $("#img").slideUp(1000);
            })
        })
    </script>

2.2 向下展开效果

向上收缩用于元素的隐藏，向下展开则用于隐藏元素的显示。jQuery中用于实现向下滑动展开元素内容的函数为slideDown(speed,[callback]) 。

函数名	slideDown(speed,[callback])
作用	通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数
返回值	jQuery
参数	speed (String,Number)：三种预定速度之一的字符串(“slow”, “normal”, or “fast”)或表示动画时长的毫秒数值（如1000）。 callback (Function)： 在动画完成时执行的函数，每个元素执行一次

示例：点击按钮１收缩图片，点击按钮２展开图片。

    <button id="btn1">收缩图片</button>
    <button id="btn2">展开图片</button><br>
    <img src="./images/p1.jpg" id="img" width="200">
    <script>
        $(function () {
            $("#btn1").bind("click", function () {
                $("#img").slideUp(1000);
            })
            $("#btn2").bind("click", function () {
                $("#img").slideDown(1000);
            })
        })
    </script>

2.3 交替伸缩元素

交替伸缩样式和交替显示隐藏类似，都是当用户单击时，如果操作的页面元素是显示状态，则将其隐藏，如果其是隐藏的，则将其显示出来。只不过这里显示的动画效果是向上或者向下滑动。jQuery中处理交替伸缩样式的函数是slideToggle(speed,[callback]) 。

函数名	slideToggle(speed,[callback])
作用	通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数
返回值jQuery
参数	speed (String,Number)：种预定速度之一的字符串(“slow”, “normal”, or “fast”)或表示动画时长的毫秒数值（如1000） callback (Function)：在动画完成时执行的函数，每个元素执行一次

示例：点击按钮收缩图片，再点击按钮展开图片，交替显示

    <button id="btn1">交替收缩图片</button><br>
    <img src="./images/p1.jpg" id="img" width="200">
    <script>
        $(function () {
            $("#btn1").bind("click", function () {
                $("#img").slideToggle(1000);
            })
        })
    </script>

3 淡入淡出效果

3.1 淡出效果

淡出效果是指页面上元素的透明度不断增大，直到消失不见的效果。jQuery中处理淡出效果的是fadeOut(speed,[callback])函数。

函数名	fadeOut(speed,[callback])
作用	通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数
返回值	jQuery
参数	speed (String,Number)：三种预定速度之一的字符串(“slow”, “normal”, or “fast”)或表示动画时长的毫秒数值（如1000）。 callback (Function)：在动画完成时执行的函数，每个元素执行一次。

    <button id="btn1">淡出效果</button><br>
    <img src="./images/p1.jpg" id="img" width="200">
    <script>
        $(function () {
            $("#btn1").bind("click", function () {
                $("#img").fadeOut(1000);
            })
        })
    </script>

3.2 淡入效果

淡入效果是指页面上元素的透明度不断减小，直到清晰显示出来的效果。在jQuery中实现淡入效果使用fadeIn(speed,[callback])函数。

函数名	fadeIn(speed,[callback])
作用	通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数
返回值	jQuery
参数	speed (String,Number)：三种预定速度之一的字符串(“slow”, “normal”, or “fast”)或表示动画时长的毫秒数值（如1000）。 callback (Function)：在动画完成时执行的函数，每个元素执行一次

示例：点击按钮1淡出效果，点击按钮2淡入效果。

    <button id="btn1">淡出效果</button>
    <button id="btn2">淡入效果</button><br>
    <img src="./images/p1.jpg" id="img" width="200">
    <script>
        $(function () {
            $("#btn1").bind("click", function () {
                $("#img").fadeOut(1000);
            })
            $("#btn2").bind("click", function () {
                $("#img").fadeIn(1000);
            })
        })
    </script>

3.3 交替淡入淡出

当用户单击时，如果操作的页面元素是显示状态，则将其隐藏，如果其是隐藏的，则将其显示出来。

函数名	fadeToggle(speed,[callback])
作用	根据元素变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数
返回值	jQuery
参数	speed (String,Number)：三种预定速度之一的字符串(“slow”, “normal”, or “fast”)或表示动画时长的毫秒数值（如1000）。 callback (Function)：在动画完成时执行的函数，每个元素执行一次。

示例：点击按钮图片淡出，再点击按钮图片淡入。

    <button id="btn1">交替淡入淡出</button><br>
    <img src="./images/p1.jpg" id="img" width="200">
    <script>
        $(function () {
            $("#btn1").bind("click", function () {
                $("#img").fadeToggle(1000);
            })
        })
    </script>

3.4 自定义不透明度淡出

fadeOut(speed,[callback])函数和fadeIn(speed,[callback])函数实现的最终结果要么是完全显示元素，要么是完全隐藏元素，不能够停留在中间的某个状态上。jQuery中专门有一个函数来设定最终结果为中间某个状态，换句话说就是设定最终的元素为半透明状态。这个函数就是fadeTo(speed,opacity,[callback])函数。

函数名	fadeTo(speed,opacity,[callback])
作用	把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数
返回值	jQuery
参数	speed (String,Number)：三种预定速度之一的字符串(“slow”, “normal”, or “fast”)或表示动画时长的毫秒数值（如1000）。 opacity (Number)：要调整到的不透明度值(0到1之间的数字)。 callback (Function)：（可选）在动画完成时执行的函数

示例：点击按钮，将图片淡出为50%透明度

    <button id="btn1">淡出</button><br>
    <img src="./images/p1.jpg" id="img" width="200">
    <script>
        $(function () {
            $("#btn1").bind("click", function () {
                $("#img").fadeTo(1000, 0.5);
            })
        })
    </script>

4 自定义动画效果

jQuery提供了诸如滑动效果、淡入淡出等一系列十分优秀的动画效果，可以让用户很方便就实现一些很酷的动画特效。

但是，这些简单的特效远远不能满足用户个性化的需求。因此，jQuery还有一个更加强大的动画生成机制，那就是自定义动画。

通过jQuery的自定义动画，可以随心所欲的实现用户需要的动画效果，有些效果甚至可以和Flash相媲美。本节将首先介绍jQuery中自定义动画的两种方式，然后介绍jQuery中动画队列的使用。

jQuery中用于自定义动画的函数是animate(params[,duration[,easing[,callback]]])函数。该函数可以有1～4个参数。

函数名	animate(params[,duration[,easing[,callback]]])
作用	用于创建自定义动画的函数。这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）
返回值	jQuery
参数	params (Options)：一组包含作为动画属性和终值的样式属性和及其值的集合 duration (String,Number)：（可选）三种预定速度之一的字符串(“slow”, “normal”, or “fast”)或表示动画时长的毫秒数值（如1000）。 easing (String)：（可选）要使用的擦除效果的名称(需要插件支持).默认jQuery提供linear和swing。 callback (Function)：（可选）在动画完成时执行的函数