第八章 JQuery动画与特效

一、显示与隐藏动画效果

1.show()方法与hide()方法

(1).show()方法：用于显示页面中的元素。

<script type="text/javascript">
        // 语法
        $().show(duration,[fn]);
        // 参数duration代表动画效果运行时间，可使用关键字：slow、normal、fast，也可以使用数值
        // 使用方法
        $("div").show("slow");
        $("div").show(600);
</script>

(2).hide()方法：用于隐藏页面中的元素，其参数含义与show()方法一致。

<script type="text/javascript">
        // 语法
        $().hide(duration,[fn]);
        // 使用方法
        $("div").hide("slow");
        $("div").hide(600);
</script>

2.toggle()方法

切换元素的可见状态，其参数含义与show()方法一致。

<script type="text/javascript">
        // 语法
        // 如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。
        $().toggle(duration,[fn]);
        // 可用boolean类型，true为可见，false为隐藏
        $().toggle(true);
</script>

二、淡入与淡出动画效果

1.fadeIn()方法与fadeOut()方法

(1).语法：（其参数含义与show()方法一致。）

<script type="text/javascript">
        // fadeIn()方法语法
        $().fadeIn(duration,[fn]);

        // fadeOut()方法语法
        $().fadeOut(duration,[fn]);
</script>

(2).与show()，hide()方法的相同点与不同点：
1>.相同点：都具有改变元素显示与隐藏状态的功能。
2>.不同点：fadeIn()方法与fadeOut()方法仅改变元素的透明度，不会修改其他属性。

2.fadeToggle()方法

fadeToggle()会动态（淡入、淡出）改变当前元素的透明度，最终切换到当前元素的可见状态。

<script type="text/javascript">
        // 语法
        $().fadeToggle(duration,[fn]);
</script>

3.fadeTo()方法

fadeTo()方法用于将被选元素的不透明度逐渐地改变为指定的值。

<script type="text/javascript">
        // 语法
        // 参数duration为动画效果的速度，参数opacity用于指定不透明值，取值范围0~1（1代表完全不透明）
        $().fadeTo(duration,opacity,[fn]);
</script>

三、滑入与滑动效果

1.slideDown()方法与slideUp()方法

slideDown() 方法通过使用滑动效果，显示隐藏的被选元素。
slideUp()方法通过使用滑动效果，在元素已显示的情况下，隐藏被选元素。

<script type="text/javascript">
        // 语法
        $().slideDown(duration,[fn]);
        $().slideUp(duration,[fn]);
        // 参数说明参照hide()等方法
</script>

2.slideToggle()方法

slideToggle() 方法通过使用滑动效果（高度变化）来切换元素的可见状态。

<script type="text/javascript">
        // 语法
        // 如果被选元素是可见的，则隐藏这些元素，如果被选元素是隐藏的，则显示这些元素。
        $().slideToggle(duration,[fn]);
</script>

四、自定义动画

1.简单的动画

animate()方法可以动态地改变当前元素的各种css属性。

<script type="text/javascript">
        // 语法
        // 参数properties使用一个“名：值”形式的对象，用于设置需要改变的css属性
        $().animate(properties,[duration],[fn]);
        // 示例（改变图片大小）
        $("img").animate({"width":"280px","height":"280px"},"slow");
</script>

2.移动位置的动画

实现效果：通过animate()方法，单击页面中图片，使其在3秒内，同时像友、向下移动100px，在移动过程中透明度变为0.5。
head部分：
将图片设置为相对定位

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-3.3.1.min.js"></script>
    <style type="text/css">
        img {
            position: absolute;
        }
    </style>
</head>

body部分：

<body>
    <p>
        <img src="tp.jpg"/>
    </p>
    <script type="text/javascript">
        $(function() {
            $("img").click(function() {
                $(this).animate({
                    // 在原属性上累加或累减
                    "left":"+=100px",
                    "top":"+=100px",
                    "opacity":"0.5" // 透明度为0.5
                },3000);
            });

        });
    </script>
</body>

3.队列中的动画

“队列”动画是指在元素中执行一个以上的多个动画效果，即有多个animate()方法在元素中执行。根据这些animate()方法执行的先后顺序形成了动画“队列”。
实现效果：单击<div>后，高度、宽度先后在原有基础上扩大一倍，然后再恢复。
head部分：

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-3.3.1.min.js"></script>
    <style type="text/css">
        div {
            border: 1px solid blue;
            width: 50px;
            height: 50px;
            font-size: 13px;
            padding: 5px;
        }
    </style>
</head>