jQuery 效果

梨涡浅笑

发布于 2022-05-08 15:29:44

4.7K0

发布于 2022-05-08 15:29:44

文章被收录于专栏：全栈自学笔记全栈自学笔记

1. jQuery 效果

jQuery 给我们封装了很多动画效果，最为常见的如下：

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

注意：动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。 jQuery为我们提供另一个方法，可以停止动画排队：stop() ;

1.1. 显示隐藏

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

语法规范如下:

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>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020-10-06，如有侵权请联系 cloudcommunity@tencent.com 删除

java

编程算法

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

java

编程算法

登录后参与评论

0 条评论

热度

jQuery 效果

jQuery 效果

1. jQuery 效果

1.1. 显示隐藏

1. 显示语法规范

2. 显示参数

1. 隐藏语法规范

2. 隐藏参数

1. 切换语法规范

2. 切换参数

1.2. 滑入滑出

1. 下滑效果语法规范

2. 下滑效果参数

1. 上滑效果语法规范

2. 上滑效果参数

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

2. 滑动切换效果参数

1.3 淡入淡出

1. 淡入效果语法规范

2. 淡入效果参数

1. 淡出效果语法规范

2. 淡出效果参数

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

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

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

2. 效果参数

1.4 自定义动画

1.5 停止动画排队

1.6. 事件切换

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐