读[3]-动画

一、 显示与隐藏——hide(),show()

1. 方法：

• hide(speed,[callback]);
• show(speed,[callback]);

     说明：这两个方法还可以实现带动画效果的显示隐藏。speed可以是“slow"(600毫秒)、"normal"(400毫秒)、"fast"(200毫秒)，可以直接是毫秒数。

      callback是动画执行完的回调函数。

2.实例：

<style type="text/css">

    body {

        font-size: 13px;

    }



    .artFram {

        border: solid 1px #ccc;

        background-color: #eee;

        width: 260px;

        padding: 8px;

        word-break: break-all;

    }



    .artList {

        line-height: 1.8em;

    }

</style>

<div class="artFram">

      <div class="artList">

           <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>

           <span>jQuery</span>

           <span style="display:none">--write less,do more.</span>

           &nbsp;<a href="javascript:void(0)">显示</a>

      </div>

</div>

html

<script type="text/javascript">

        $(function () {

            var $link = $(".artList a");

            var $hide = $(".artList :eq(2)");

            $link.click(function () {

                if ($(this).html() == "显示") {

                    $(this).html("隐藏");

                    $hide.show(1000,function(){alert("显示")});

                } else {

                    $(this).html("显示");

                    $hide.hide(800, function () { alert("隐藏")});

                }

            })

        });

    </script>

二、切换显示隐藏——toggle()

1. 方法

• toggle()：无参数，直接切换显示隐藏状态；
• toggle(switch)：switch是布尔值，true显示元素，false隐藏元素。
• toggle(speed,[callback]):speed为切换速度；callback为动画效果执行之后的回调函数。

说明：当以动画效果展示时，元素的width,height,padding,margin都以动画形式展示。

2. 实例：

<div class="divFrame">

     <div class="divMenu">

          <input id="Button1" type="button" value="无参数"/><br />

          <input id="Button2" type="button" value="逻辑显示" /><br />

          <input id="Button3" type="button" value="动画显示"/>

     </div>

     <div class="divContent">

          <img src="Images/img03.jpg" alt="" />

     </div>

</div>

html

<script type="text/javascript">

        var isShow = false;

        var title = $(".divTitle");

        var content = $(".divContent");



        $(function () {

            title.click(function () {

                if (isShow) {

                    $("img").slideUp("normal", function () {

                        $("#divTip").html("关闭成功");

                        isShow = false;

                    });

                } else {

                    $("img").slideDown("normal");

                    $("#divTip").html("");

                    isShow = true;

                }

            });

        });

    </script>

三、滑动效果——slide

• slideUp(speed,[callback]):向上滑动，减小元素高度至0
• slideDow(speed,[callback]):向下滑动，增大元素高度。
• slideToggle(speed,[callback]):以动画效果切换元素高度。

四、淡入淡出——fade

1. 淡入淡出方法

• fadeIn(speed,[callback]):淡入，透明度由0.0到1.0；
• fadeOut(speed,[callback]):淡出，透明度由1.0到0.0；

实例：

<div class="divFrame">

       <div class="divTitle">

           <input id="Button1" type="button" value="fadeIn" class="btn" />

           <input id="Button2" type="button" value="fadeOut" class="btn" />

       </div>

       <div class="divContent">

           <div class="divTip"></div>

           <img src="Images/img05.jpg" alt="" title="风景图片" style="display:none;" />

       </div>

  </div>

html

<script type="text/javascript">

        $(function () {

            $img = $("img"); //图片元素对象

            $tip = $(".divTip"); //提示元素对象

            $("#Button1").click(function () { //第一个按钮单击事件

                $tip.html(""); //清空提示内容

                //在2000毫秒中淡入图片，并执行一个回调函数

                $img.fadeIn(2000, function () {

                    $tip.html("淡入成功！");

                })

            })

            $("#Button2").click(function () { //第二个按钮单击事件

                $tip.html(""); //清空提示内容

                //在2000毫秒中淡出图片，并执行一个回调函数

                $img.fadeOut(2000, function () {

                    $tip.html("淡出成功！");

                })

            })

        })

    </script>

2. fadeTo(speed,opacity,[callback])：以动画效果将透明度设置为一个指定值，还可以设置回调函数。

实例：

<input type="button" id="btn" value="click" />

        <div class="divContent">

            <img src="Images/img06.jpg" alt="" title="风景图片" />

        </div>

html

<script type="text/javascript">

        $(function () {

            var opacity = 0.0;

            $("#btn").click(function () {

                if (opacity >= 1.0) {

                    opacity = 0.0;

                } else {

                    opacity += opacity + 0.2;

                }

                $("img").fadeTo("normal", opacity);

            });

        });

    </script>

五、自定义动画——animate

1.方法 ：

animate(params,[duration],[easing],[callback])

说明：param表示要调整的属性键值对，duration表示速度，easing表示动画插件，callback表示动画效果完成后的回调效果。

注意：

params的属性名要使用骆驼写法，例如font-size要写成fontSize。

如果想以动画形式移动元素位置，则position必须设置为relative或者absolute。

队列动画：在元素中执行一个或者多个animate方法。