jQuery 动画效果

show&hide

   左上角的渐变进行显示和隐藏。

   参数1:动画秒数

   参数2:回调函数,用于动画执行完毕后的反馈操作

   注意:当元素隐藏后,是不占据文档流空间位置的。同级排在之后的元素会进行跟进补白

   其实底层是设置display:hidden或移除display属性,并添加一些动画所实现的

   jQuery 动画效果

<body>
                
        <div style="width: 200px;height: 200px;background-color: red;"></div>
 
        <p><button type="button" style="display: block;">slideUp</button></p>
        <p><button type="button" style="display: block;">slideDown</button></p>

</body>
<script src=‘https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js‘></script>
<script>
        $(() => {

                $("button:first").on("click", function (ev) {
                        $("div").hide(3000,function () {
                                $("button:first").text("已隐藏");
                        });
                })

                $("button:last").on("click", function (ev) {
                        $("div").show(3000,function () {
                                $("button:first").text("hide");
                                $("button:last").text("已显示");
                        });
                })

        })

</script>

slideDown&slideUp

   自下而上的渐变进行显示和隐藏。

   参数1:动画秒数

   参数2:回调函数,用于动画执行完毕后的反馈操作

   注意:当元素隐藏后,是不占据文档流空间位置的。同级排在之后的元素会进行跟进补白

   其实底层是设置display:hidden或移除display属性,并添加一些动画所实现的

   jQuery 动画效果

<body>
                
        <div style="width: 200px;height: 200px;background-color: red;"></div>
 
        <p><button type="button" style="display: block;">slideUp</button></p>
        <p><button type="button" style="display: block;">slideDown</button></p>

</body>
<script src=‘https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js‘></script>
<script>
        $(() => {

                $("button:first").on("click", function (ev) {
                        $("div").slideUp(3000,function () {
                                $("button:first").text("已隐藏");
                        });
                })

                $("button:last").on("click", function (ev) {
                        $("div").slideDown(3000,function () {
                                $("button:first").text("hide");
                                $("button:last").text("已显示");
                        });
                })

        })

</script>

slideToggle

   如果已隐藏,就显示,如果已显示,就隐藏。

   参数1:动画秒数

   参数2:回调函数,用于动画执行完毕后的反馈操作

   注意:当元素隐藏后,是不占据文档流空间位置的。同级排在之后的元素会进行跟进补白

   其实底层是设置display:hidden或移除display属性,并添加一些动画所实现的

   jQuery 动画效果

<body>

        <div style="width: 200px;height: 200px;background-color: red;"></div>

        <p><button type="button" style="display: block;">slideToggle-已显示</button></p>

</body>
<script src=‘https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js‘></script>
<script>
        $(() => {

                $("button:first").on("click", function (ev) {
                        $("div").slideToggle(3000, function () {
                                if ($("button:first").text().indexOf("已显示") > 1) {
                                        $("button:first").text("slideToggle-已隐藏")
                                }else{
                                        $("button:first").text("slideToggle-已显示")
                                }

                        });
                })

        })

</script>

fadeIn&fadeOut

   原位置单纯的透明度的改变

   参数1:动画秒数

   参数2:回调函数,用于动画执行完毕后的反馈操作

   注意:当元素隐藏后,是不占据文档流空间位置的。同级排在之后的元素会进行跟进补白

   其实底层是判断display是不是hidden,并添加一些动画所实现的

   jQuery 动画效果

<body>
                
        <div style="width: 200px;height: 200px;background-color: red;"></div>
 
        <p><button type="button" style="display: block;">fadeOut</button></p>
        <p><button type="button" style="display: block;">fadeIn</button></p>

</body>
<script src=‘https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js‘></script>
<script>
        $(() => {

                $("button:first").on("click", function (ev) {
                        $("div").fadeOut(3000,function () {
                                $("button:first").text("已隐藏");
                        });
                })

                $("button:last").on("click", function (ev) {
                        $("div").fadeIn(3000,function () {
                                $("button:first").text("hide");
                                $("button:last").text("已显示");
                        });
                })

        })

</script>

fadeToggle()

   如果已隐藏,就显示,如果已显示,就隐藏。

   参数1:动画秒数

   参数2:回调函数,用于动画执行完毕后的反馈操作

   注意:当元素隐藏后,是不占据文档流空间位置的。同级排在之后的元素会进行跟进补白

   其实底层是设置display:hidden或移除display属性,并添加一些动画所实现的

   jQuery 动画效果

<body>

        <div style="width: 200px;height: 200px;background-color: red;"></div>

        <p><button type="button" style="display: block;">fadeToggle-已显示</button></p>

</body>
<script src=‘https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js‘></script>
<script>
        $(() => {

                $("button:first").on("click", function (ev) {
                        $("div").fadeToggle(3000, function () {
                                if ($("button:first").text().indexOf("已显示") > 1) {
                                        $("button:first").text("slideToggle-已隐藏")
                                }else{
                                        $("button:first").text("slideToggle-已显示")
                                }

                        });
                })

        })

</script>

fadeTo()

   可指定元素透明度

   参数1:动画秒数

   参数2:透明度

   参数3:回调函数,用于动画执行完毕后的反馈操作

   底层其实就是控制opacity的值实现的

   jQuery 动画效果

<body>

        <div style="width: 200px;height: 200px;background-color: red;"></div>

        <p><button type="button" style="display: block;">fadeTo .3</button></p>

</body>
<script src=‘https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js‘></script>
<script>
        $(() => {

                $("button:first").on("click", function (ev) {


                        if ($("div").css("opacity") == "0.3") {
                                $("div").fadeTo(3000, .7, function () {
                                        $("button:first").text("fadeTo .7");
                                });

                        } else {
                                $("div").fadeTo(3000, .3, function () {
                                        $("button:first").text("fadeTo .7");
                                });
                        }

                })

        })

</script>

animate()

   可设置自定义动画

   参数1:自定义动画的CSS

   参数2:执行秒数

   参数3:回调函数

   以下示例将展示点击按钮后让<div>发生自定义变化。

   jQuery 动画效果

<body>
        <main style="width: 200px;height: 200px;border: 1px solid #ddd;">
                <div style="width: 50px;height: 50px;background-color: red;"></div>
        </main>


        <p><button type="button" style="display: block;">面积改变</button></p>

</body>
<script src=‘https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js‘></script>
<script>
        $(() => {

                $("button").on("click", function (ev) {

                        let n1 = Math.floor(Math.random() * (254 + 1));
                        let n2 = Math.floor(Math.random() * (254 + 1));
                        let n3 = Math.floor(Math.random() * (254 + 1));


                        $("div").animate(
                                {
                                        width: "100%",
                                        height: "100%",
                                        borderWidth: 10
                                }, 1000);

                });

        })

</script>

jQuery 动画效果

上一篇:jQuery 插件扩展


下一篇:用Dockerfile部署你的Flask Web应用