jQuery 效果

小犬牙吃糖果

于 2022-12-02 10:34:27 发布

阅读量231

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/LUXCC6/article/details/128143936

版权

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

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

一、显示隐藏

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

二、滑入滑出

    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
            display: none;
        }
    </style>
</head>
<body>
    <button class="btn1">下滑</button>
    <button class="btn2">上滑</button>
    <button class="btn3">切换滑动</button>

    <div></div>

    <script>
        $(function(){
            //下滑
            $('.btn1').click(function(){
                $('div').slideDown()
            })

            //上滑
            $('.btn2').click(function(){
                $('div').slideUp()
            })

            $('.btn3').click(function(){
                $('div').slideToggle()
            })
        })
    </script>
</body>

三、淡入淡出

    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
            display: none;
        }
    </style>
</head>
<body>
    <button>淡入效果</button>
    <button>淡出效果</button>
    <button>淡入淡出切换</button>
    <button>修改透明度</button>
    <div></div>

    <script>
        $(function(){
            $('button').eq(0).click(function(){
                $('div').fadeIn(1000)
            })

            $('button').eq(1).click(function(){
                $('div').fadeOut(1000)
            })

            $('button').eq(2).click(function(){
                $('div').fadeToggle(1000)
            })

            $('button').eq(3).click(function(){
                $('div').fadeTo(1000,0.5)
            })
        })
    </script>
</body>

四、自定义动画

    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .current {
            width: 100px;
        }
    </style>
    <script src="./js/jquery-3.6.1.min.js"></script>
</head>
<body>
    <!-- <button>动起来</button> -->
    <div></div>
    <script>
        $(function(){
                $('div').mouseenter(function(){
                    $(this).animate({
                    left: 500,
                    top: 50,
                    opacity:0.5,
                    width:500
                },500)
                })

                $('div').mouseleave(function(){
                    $(this).animate({
                    left: 500,
                    top: 50,
                    opacity:1,
                    width:100
                },500)
                })


        })
    </script>