jQuery 效果

时间 2020-10-07 标签 javascript css java ide 函数动画 this spa code orm

1. jQuery 效果

jQuery 给咱们封装了不少动画效果，最为常见的以下：javascript

显示隐藏：show() / hide() / toggle() ;css
划入画出：slideDown() / slideUp() / slideToggle() ; java
淡入淡出：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ; ide
自定义动画：animate() ;函数

注意：动画

动画或者效果一旦触发就会执行，若是屡次触发，就形成多个动画或者效果排队执行。this

jQuery为咱们提供另外一个方法，能够中止动画排队：stop() ;spa

1.1. 显示隐藏

显示隐藏动画，常见有三个方法：show() / hide() / toggle() ;code

语法规范以下:orm

1. 显示语法规范

show([speed,[easing],[fn]])

2. 显示参数

（1）参数均可以省略，无动画直接显示。
（2）speed：三种预约速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每一个元素执行一次。

1. 隐藏语法规范

hide([speed,[easing],[fn]])

2. 隐藏参数

1. 切换语法规范

toggle([speed,[easing],[fn]])

2. 切换参数

代码演示

<body>
    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <div></div>
    <script>
        $(function() {
            $("button").eq(0).click(function() {
                $("div").show(1000, function() {
                    alert(1);
                });
            })
            $("button").eq(1).click(function() {
                $("div").hide(1000, function() {
                    alert(1);
                });
            })
            $("button").eq(2).click(function() {
              $("div").toggle(1000);
            })
            // 通常状况下，咱们都不加参数直接显示隐藏就能够了
        });
    </script>
</body>

1.2. 滑入滑出

滑入滑出动画，常见有三个方法：slideDown() / slideUp() / slideToggle() ;

语法规范以下:

1. 下滑效果语法规范

slideDown([speed,[easing],[fn]])

2. 下滑效果参数

（1）参数均可以省略。
（2）speed:三种预约速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（3）easing:(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每一个元素执行一次。

1. 上滑效果语法规范

slideUp([speed,[easing],[fn]])

2. 上滑效果参数

（1）参数均可以省略。
（2）speed：三种预约速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每一个元素执行一次。

1. 滑动切换效果语法规范

slideToggle([speed,[easing],[fn]])

2. 滑动切换效果参数

代码演示

<body>
    <button>下拉滑动</button>
    <button>上拉滑动</button>
    <button>切换滑动</button>
    <div></div>
    <script>
        $(function() {
            $("button").eq(0).click(function() {
                // 下滑动 slideDown()
                $("div").slideDown();
            })
            $("button").eq(1).click(function() {
                // 上滑动 slideUp()
                $("div").slideUp(500);
            })
            $("button").eq(2).click(function() {
                // 滑动切换 slideToggle()
                $("div").slideToggle(500);
            });
        });
    </script>
</body>

1.3 淡入淡出

淡入淡出动画，常见有四个方法：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;

语法规范以下:

1. 淡入效果语法规范

fadeIn([speed,[easing],[fn]])

2. 淡入效果参数

1. 淡出效果语法规范

fadeOut([speed,[easing],[fn]])

2. 淡出效果参数

1. 淡入淡出切换效果语法规范

fadeToggle([speed,[easing],[fn]])

2. 淡入淡出切换效果参数

1. 渐进方式调整到指定的不透明度

fadeTo([[speed],opacity,[easing],[fn]])

2. 效果参数

（1）opacity 透明度必须写，取值 0~1 之间。
（2）speed：三种预约速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。必须写
（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每一个元素执行一次。

代码演示

<body>
    <button>下拉滑动</button>
    <button>上拉滑动</button>
    <button>切换滑动</button>
    <div></div>
    <script>
        $(function() {
            $("button").eq(0).click(function() {
                // 下滑动 slideDown()
                $("div").slideDown();
            })
            $("button").eq(1).click(function() {
                // 上滑动 slideUp()
                $("div").slideUp(500);
            })
            $("button").eq(2).click(function() {
                // 滑动切换 slideToggle()
                $("div").slideToggle(500);
            });
        });
    </script>
</body>

1.4 自定义动画

自定义动画很是强大，经过参数的传递能够模拟以上全部动画，方法为：animate() ;

语法规范以下:

1. 语法

animate(params,[speed],[easing],[fn])

2. 参数
（1）params: 想要更改的样式属性，以对象形式传递，必须写。属性名能够不用带引号，若是是复合属性则须要采取驼峰命名法 borderLeft。其他参数均可以省略。
（2）speed：三种预约速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每一个元素执行一次。

代码演示

<body>
    <button>动起来</button>
    <div></div>
    <script>
        $(function() {
            $("button").click(function() {
                $("div").animate({
                    left: 500,
                    top: 300,
                    opacity: .4,
                    width: 500
                }, 500);
            })
        })
    </script>
</body>

1.5 中止动画排队

动画或者效果一旦触发就会执行，若是屡次触发，就形成多个动画或者效果排队执行。

中止动画排队的方法为：stop() ;

stop() 方法用于中止动画或效果。
stop() 写到动画或者效果的前面，至关于中止结束上一次的动画。

总结: 每次使用动画以前，先调用 stop() ,在调用动画

 $(".nav>li").hover(function() {
                // stop 方法必须写到动画的前面
                $(this).children("ul").stop().slideToggle();
            });

1.6. 事件切换

jQuery中为咱们添加了一个新事件 hover() ; 功能相似 css 中的伪类 :hover 。介绍以下

语法


hover([over,]out)     // 其中over和out为两个函数

over:鼠标移到元素上要触发的函数（至关于mouseenter）
out:鼠标移出元素要触发的函数（至关于mouseleave）
若是只写一个函数，则鼠标通过和离开都会触发它

hover事件和中止动画排列案例

<body>
    <ul class="nav">
        <li>
            <a href="#">微博</a>
            <ul><li><a href="">私信</a></li><li><a href="">评论</a></li><li><a href="">@我</a></li></ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul><li><a href="">私信</a></li><li><a href="">评论</a></li><li><a href="">@我</a></li></ul>
        </li>
    </ul>
    <script>
        $(function() {
            // 鼠标通过
            // $(".nav>li").mouseover(function() {
            //     // $(this) jQuery 当前元素  this不要加引号
            //     // show() 显示元素  hide() 隐藏元素
            //     $(this).children("ul").slideDown(200);
            // });
            // // 鼠标离开
            // $(".nav>li").mouseout(function() {
            //     $(this).children("ul").slideUp(200);
            // });
            // 1. 事件切换 hover 就是鼠标通过和离开的复合写法
            // $(".nav>li").hover(function() {
            //     $(this).children("ul").slideDown(200);
            // }, function() {
            //     $(this).children("ul").slideUp(200);
            // });
            // 2. 事件切换 hover  若是只写一个函数，那么鼠标通过和鼠标离开都会触发这个函数
            $(".nav>li").hover(function() {
                // stop 方法必须写到动画的前面
                $(this).children("ul").stop().slideToggle();
            });
        })
    </script>
</body>

1.7. 案例：王者荣耀手风琴效果

思路分析: 1.鼠标通过某个小li 有两步操做：2.当前小li 宽度变为 224px，同时里面的小图片淡出，大图片淡入3.其他兄弟小li宽度变为69px，小图片淡入，大图片淡出

<script type="text/javascript">
      $(function () {
        // 鼠标通过某个小li 有两步操做:

        $(".king li").mouseenter(function () {
          // 1.当前小li 宽度变为 224px， 同时里面的小图片淡出，大图片淡入
          $(this)
            .stop()
            .animate({
              width: 224,
            })
            .find(".small")
            .stop()
            .fadeOut()
            .siblings(".big")
            .stop()
            .fadeIn();
          // 2.其他兄弟小li宽度变为69px， 小图片淡入， 大图片淡出
          $(this)
            .siblings()
            .stop()
            .animate({
              width: 69,
            })
            .find(".small")
            .stop()
            .fadeIn()
            .siblings(".big")
            .stop()
            .fadeOut();
        });
      });
    </script>