jquery3

 

 jQuery 效果

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

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

  • 显示隐藏

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

    ​ 语法规范如下:

     

     

     

    <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>

    滑入滑出

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

    ​ 语法规范如下:

     

     

      

    <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>

    淡入淡出

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

    ​ 语法规范如下:

  • <body>
    <button>淡入效果</button>
    <button>淡出效果</button>
    <button>淡入淡出切换</button>
    <button>修改透明度</button>
    <div></div>
    <script>
        $(function() {
            $("button").eq(0).click(function() {
                // 淡入 fadeIn()
                $("div").fadeIn(1000);
            })
            $("button").eq(1).click(function() {
                // 淡出 fadeOut()
                $("div").fadeOut(1000);
            })
            $("button").eq(2).click(function() {
                // 淡入淡出切换 fadeToggle()
                $("div").fadeToggle(1000);
            });
            $("button").eq(3).click(function() {
                //  修改透明度 fadeTo() 这个速度和透明度要必须写
                $("div").fadeTo(1000, 0.5);
            });
        });
    </script>
</body>

     

posted @ 2021-12-20 17:44  吴萌  阅读(137)  评论(0)    收藏  举报