Jquery动画之显示和隐藏(普通、滑动、淡入淡出)

太过爱你忘了你带给我的痛 2023-01-01 01:59 160阅读 0赞

以下列举了三种jquery的显示和隐藏的动画方式，大家可以直接复制，取消注释进行查看；

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>01-jq动画</title>
        <script src="js/jquery-3.5.1.min.js"></script>
    </head>
    <body>
    
    <input type="button" id="b1" value="点击隐藏div">
    <input type="button" id="b2" value="点击显示div">
    <input type="button" id="b3" value="点击切换显示或隐藏div">
    
    <div id="aa" style="background: pink; width: 200px; height: 200px; margin-top: 20px;">你好123</div>
    
    <script>
    
        /*
            一、默认普通的显示和隐藏
            show([speed], [easing ], [fn])
            hide([speed], [easing ], [fn])
            toogle([speed], [easing ], [fn])
    
            二、滑动的显示和隐藏
            slideDown([speed], [easing ], [fn])
            slideUp([speed], [easing ], [fn])
            slideToogle([speed], [easing ], [fn])
    
            三、淡入淡出显示和隐藏
            fadeIn([speed], [easing ], [fn])
            fadeOut([speed], [easing ], [fn])
            fadeToogle([speed], [easing ], [fn])
    
            参数说明
            * speed: 隐藏/显示 效果的速度。默认是 "0"毫秒。可能的值：slow，normal，fast。"
            * easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
            * fn:在动画完成时执行的函数，每个元素执行一次。
        */
    
    
        // 演示默认普通的显示和隐藏
        // 点击隐藏div
        $('#b1').click(function () {
            $('#aa').hide('slow', "swing");
        });
    
        // 点击显示div
        $('#b2').click(function () {
            $('#aa').show(5000)
        });
    
        // 点击切换显示或隐藏div
        $('#b3').click(function () {
            $('#aa').toggle('normal', 'swing');
        });
    
    
        // 演示滑动的显示和隐藏
        // 点击隐藏div
        // $('#b1').click(function () {
        //     $('#aa').slideUp('slow', "swing");
        // });
        //
        // // 点击显示div
        // $('#b2').click(function () {
        //     $('#aa').slideDown(5000, 'linear')
        // });
        //
        // // 点击切换显示或隐藏div
        // $('#b3').click(function () {
        //     $('#aa').slideToggle('normal', 'swing', function () {
        //         alert(1);
        //     });
        // });
    
    
        // 演示淡入淡出显示和隐藏
        // 点击隐藏div
        // $('#b1').click(function () {
        //     $('#aa').fadeOut('slow', "swing");
        // });
        //
        // // 点击显示div
        // $('#b2').click(function () {
        //     $('#aa').fadeIn(5000)
        // });
        //
        // // 点击切换显示或隐藏div
        // $('#b3').click(function () {
        //     $('#aa').fadeToggle('normal', 'swing');
        // });
    
    </script>
    </body>
    </html>