jQuery动画

显示与隐藏：show()、hide()

这两个方法能够实现无动画的显示与隐藏，也能够实现有动画版的显示与隐藏。在括号中加入参数便可。

有动画效果的显示：show(speed,[callback]);
有动画效果的隐藏：hide(speed,[callback]);

speed参数是动画的执行速度，默认的速度有：slow，normal，fast，也能够指定速度，默认单位毫秒。

show(),hide()方法实现p元素的文字点击消失，而后在显示，并设置文字颜色为红色

<script type="text/javascript">
    $(function() {
        $("p").click(function(){
            $(this).hide("slow",function(){
                $(this).show("slow",function(){
                    $("p").css("color","red");
                });
            });
        });
    });
</script>
<div class="wrapper">
    <p>隐藏于显示动画</p>
</div>

toggle()方法

在使用show(),hide()方法实现动画时，一般要先判断元素的显示仍是隐藏，这样就会使代码显得很长，为了解决这个问题，能够使用toggle方法，该方法是在显示和隐藏之间进行切换。

调用该方法有三种格式：

格式一：无参数，toggle();

格式二：逻辑参数调用格式，toggle(switch);switch是一个布尔值，switch为true时显示元素，为false时隐藏元素。

格式三：动画效果调用格式，toggle(speed,[callback]);

三种调用方式实现图片的显示与隐藏，其中第一种方式是单纯的图片显示与隐藏切换，没有动画。第二种方式设置参数值为false，点击以后隐藏图片。第三种方式，实现图片显示与隐藏的切换，可是在显示图片的时候，给图片添加一个一像素的实线黑色边框

<script type="text/javascript">
    $(function() {
        $("input:eq(0)").click(function(){
            $("img").toggle();
        });
        $("input:eq(1)").click(function(){
            $("img").toggle(false);
        });
        $("input:eq(2)").click(function(){
            $("img").toggle(3000,function(){
                $(this).css({"border":"1px #000 solid"});
            });
        });
    });
</script>
<div class="wrapper">
    <img src="http://xinxinjs.github.io/img_test/bt2.jpg" />
</div>
<input type="button" value="无参数" />
<input type="button" value="逻辑参数" />
<input type="button" value="动画效果" />

滑动动画

jQuery中提供了两个实现元素滑动的方法：slideDown和slideUp方法。

slideDown()语法格式：slideDown(speed,[callback]);其功能是以动画的效果，将所选元素的高度向下增大，使其呈现一种滑动的效果

slideUp()语法格式：slideUp(speed,[callback]);其功能是以动画的效果，将所选元素的高度向上缩小，使其呈现一种滑动的效果

slideUp方法实现图片向上滑动收起动画效果，并在图片收起以后弹出图片已经收起效果

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
    $(function() {
        $("input").click(function(){
            $("img").slideUp(1000,function(){
                alert("图片已经收起");
            });
        });
    });
</script>

<div class="wrapper">
    <img src="http://xinxinjs.github.io/img_test/bt2.jpg" />
</div>
<input type="button" value="点击向上滑动图片" />

slideToggle()方法

该方法能够在元素向下滑动和向上滑动之间进行切换。语法：slideToggle(speed,[callback]);

slideToggle()方法实现图片向上滑动和向下滑动的动画切换

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
    $(function() {
        $("input").click(function(){
            $("img").slideToggle(1000,function(){
                alert("图片滑动状态已经变化");
            });
        });
    });
</script>

<div class="wrapper">
    <img src="http://xinxinjs.github.io/img_test/bt2.jpg" />
</div>
<input type="button" value="点击滑动图片" />

淡入淡出

在jQuery中经过改变元素的透明度，来实现动画效果的方法：fadeIn和fadeOut方法

fadeIn语法：fadeIn(speed,[callback]);

fadeOut语法：fadeOut(speed,[callback]);

fadeOut方法实现图片淡出

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
    $(function() {
        $("input").click(function(){
            $("img").fadeOut(2000,function(){
                alert("图片淡出");
            });
        });
    });
    </script>

<div class="wrapper">
    <img src="http://xinxinjs.github.io/img_test/st2.jpg" />
</div>
<input type="button" value="点击图片淡出" />

fadeTo方法

该方法能够以动画的形式改变元素的透明度到某一指定值。语法fadeTo(speed,opacity,[callback]);
对于该方法第一个参数和第三个参数就不用说明了，这里说明一下第二个参数opacity，这个参数值的范围是0-1，定义元素发生动画完成时的透明度值

使用fadeTo方法改变图片的透明度到指定值

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
    $(function() {
        $("input").click(function(){
            $("img").fadeTo(2000,0.5,function(){
                alert("图片淡出");
            });
        });
    });
</script>
<div class="wrapper">
    <img src="http://xinxinjs.github.io/img_test/st2.jpg" />
</div>
<input type="button" value="点击图片改变透明度" />

自定义动画

animate-简单的动画

调用语法：animate(params,[duration],[easing],[callback]);
其中参数params表示用于制做动画效果的属性样式和值的集合，duration表示三种默认的速度字符-slow、fast、normal，可选项easing为动画插件使用，用于控制动画的表现效果，一般有：linear和swing字符值。

自定义动画，点击开始按钮以后图片的宽度为页面的100%

<script type="text/javascript" src="jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
                $("input").click(function(){
                    $("img").animate({
                        width:100+"%"
                    },"slow","linear");
                });
            });
</script>
        <h1>点击按钮执行自定义的动画</h1>
        <div class="wrapper">
            <img src="http://xinxinjs.github.io/img_test/st2.jpg" />
        </div>
        <input type="button" value="开始" />

若是为一个元素定义多个动画，这些动画会造成动画队列，依次执行。

动画中止stop

在jQuery中，提供stop()方法，中止正在执行的动画，其调用格式：stop([clearQueue],[gotoEnd]);
参数clearQueue是一个布尔值，表示是否中止正在执行的动画。参数gotoEnd也是一个布尔值，表示是否当即完成正在执行的动画

实现点击开始按钮开始动画，点击中止按钮当即中止动画

<script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $("input:eq(0)").click(function(){
                $("img").animate({
                    width:100+"%"
                },"slow","linear");
                $("img").animate({
                    width:50+"%"
                },"slow","linear");
                $("img").animate({
                    width:100+"%"
                },"slow","linear");
                $("img").animate({
                    width:20+"%"
                },"slow","linear");
            });
            $("input:eq(1)").click(function(){
                $("img").stop(true,false);
            });
        });
</script>
<h3>点击开始按钮执行自定义的动画，点击中止按钮中止动画</h3>
<input type="button" value="开始" />
<input type="button" value="中止" />
<div class="wrapper">
    <img src="http://xinxinjs.github.io/img_test/st2.jpg" />
</div>

动画延迟delay

语法：delay(duration,queueName);

参数duration为延迟的时间值，单位毫秒。queueName为动画队列名词，即动画队列。