jQuery动画特效

1.调用show()和hide()方法显示和隐藏元素,toggle切换，之前已经有博文细讲了。

$(selector).hide(speed,[callback]);
$(selector).show(speed,[callback]);
//参数speed设置隐藏或显示时的速度值，可为“slow”、“fast”或毫秒数值，可选项参数callback为隐藏或显示动作执行完成后调用的函数名。

2.slideUp()和slideDown()方法的滑动效果

比如配合click使用，通过up和down改变元素高度，从何实现其隐藏和显示的效果

$(selector).slideUp(speed,[callback]);
$(selector).slideDown(speed,[callback]);
//其中speed参数为滑动时的速度，单位是毫秒，可选项参数callback为滑动成功后执行的回调函数名。

slideDown()仅适用于被隐藏的元素；slideup()则相反。 
同样，slideToggle实现滑动切换的效果。

3.fadeIn（），fadeOut（），实现淡入淡出，通过改变其透明度。

格式如上，参数为时间和回调

fadeTo()方法设置淡入淡出效果的不透明度：

 

$(selector).fadeTo(speed,opacity,[callback]);
//其中speed参数为效果的速度，opacity参数为指定的不透明值，它的取值范围是0.0~1.0，可选项参数callback为效果完成后，回调的函数名。

4.animate()方法自定义动画效果

//$(selector).animate({params},speed,[callback])
//params参数为制作动画效果的CSS属性名与值，要加上大括号;
 <script type="text/javascript">
            $(function () {
                $("div").animate({
                    width: "20px",
                    height: "20px"
                },
                3000, function () {
                    $("div").html("执行完成!");
                });
            });
        </script>
//这个实现了改变div的长宽并执行完成后显示执行完成

除了改变长宽，还可以移动元素位置，但是移动位置之前，必须将被移元素的“position”属性值设为“absolute”或“relative”。

<script type="text/javascript">
            $(function () {
                $("span").animate({
                    left: "20px"
                }, 3000, function () {
                    $("span").animate({
                        height: '+=30px',
                        width: '+=30px'
                    }, 3000, function () {
                        $("div").html("执行完成!");
                    });
                });
            });
        </script>

该图形已经在css设置了长宽，颜色，position

再调用animate方法，其效果是：先向右移动，left变为20px,耗时3000ms，完成后执行长宽各加30px,耗时3000ms，最后显示执行完成。

这里是几层的回调函数，就会分布进行，如果要通知进行，就把自定义的动画全部放入param中即可。

 

5.调用stop()方法停止当前所有动画效果

$(selector).stop([clearQueue],[goToEnd])
//其中，两个可选项参数clearQueue和goToEnd都是布尔类型值，前者true表示停止正在执行的动画，后者为true表示完成正在执行的动画即直接显示最后效果，默认为false。

6.delay（）延时执行动画效果

$(selector).delay(duration)

其中参数duration为延时值。指的是，下一个动画的延时执行，执行中的动画并不会停止。

下面例子表示，执行动画过程中，点击按钮后，下一个动画（动画队列中）推迟2000ms后再执行动画。

还有一点是，重复点击时，时间会累加：

调用delay()方法延时执行动画效果

<input id="btnStop" type="button" value="延时" />
<div id="tip">&nbsp;</div>
<script type="text/javascript">
            $(function () {
                $("span").animate({
                    left: "+=100px"
                }, 3000, function () {
                    $(this).animate({
                        height: &#39;+=60px&#39;,
                        width: &#39;+=60px&#39;
                    }, 3000, function () {
                        $("#tip").html("执行完成!");
                    });
                });
                $("#btnStop").bind("click", function () {
                    $("span").delay(2000);
                    $("#tip").html("正在延时!");
                    
                });
            });
        </script>