zoukankan      html  css  js  c++  java

  • jQuery 效果

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

    1. 切换语法规范

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

    2. 切换参数

    （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() {
                $("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. 滑动切换效果参数

    （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.3 淡入淡出

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

    ​ 语法规范如下:

    1. 淡入效果语法规范

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

    2. 淡入效果参数

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

    1. 淡出效果语法规范

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

    2. 淡出效果参数

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

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

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

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

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

    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,
                     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({
               224,
            })
            .find(".small")
            .stop()
            .fadeOut()
            .siblings(".big")
            .stop()
            .fadeIn();
          // 2.其余兄弟小li宽度变为69px， 小图片淡入， 大图片淡出
          $(this)
            .siblings()
            .stop()
            .animate({
               69,
            })
            .find(".small")
            .stop()
            .fadeIn()
            .siblings(".big")
            .stop()
            .fadeOut();
        });
      });
    </script>
  • 相关阅读:
    nodejs事件和事件循环详解
    keycloak集群化的思考
    Python解释器和IPython
    IndexedDB详解
    在onelogin中使用OpenId Connect Implicit Flow
    在onelogin中使用OpenId Connect Authentication Flow
    SAML和OAuth2这两种SSO协议的区别
    wildfly 21的配置文件和资源管理
    【老孟Flutter】2021 年 Flutter 官方路线图
    【老孟Flutter】为什么 build 方法放在 State 中而不是在 StatefulWidget 中
  • 原文地址：https://www.cnblogs.com/bky-/p/13776019.html
Copyright © 2011-2022 走看看