jQuery 动画效果

最新推荐文章于 2024-11-15 11:02:00 发布

原创最新推荐文章于 2024-11-15 11:02:00 发布 · 225 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #jquery

前端同时被 2 个专栏收录

80 篇文章

订阅专栏

jQuery

8 篇文章

订阅专栏

本文详细介绍了jQuery的各种动画效果，包括元素显隐、滑动、淡入淡出、自定义动画以及如何停止和延迟动画执行。同时，文章还强调了队列动画的概念，帮助开发者更好地理解和应用jQuery的动画功能。

jQuery中文开发文档

元素显隐效果

$(selector).show([speed], [easing], [fn] )：元素显示
$(selector).hide([speed], [easing], [fn] )：元素隐藏
$(selector).toggle([speed], [easing], [fn])：元素自动切换显隐

参数说明

speed：速度：慢速“slow”，正常“normal”，快速“fast” 或表示动画时长的毫秒数
easing：切换效果：摆动“swing”，直线“liner”
fn：动画完成时执行的函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <script src="./jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <style type="text/css">
        #btn{
            display: block; width: 200px; height: 40px; margin: 50px auto;
        }
        img{
            /* display: none;  */
        }
    </style>
    <script>
        $(function(){
            // show()：元素显示
            $("#btn").click(function(){
                // $("img").css("display", "block");

                // $("img").show();

                // $("img").show(2000);

                // $("img").show(2000, function(){
                //     alert("我显示了");
                // });
            });

            // hide()：元素隐藏
            $("#btn").click(function(){
                // $("img").hide();

                // $("img").hide(2000);

                // $("img").hide(2000, function(){
                //     alert("我隐藏了");
                // });
            });

            // toggle()：元素切换显隐
            $("#btn").click(function(){
                // $("img").toggle();

                // $("img").toggle(2000);

                $("img").toggle(2000, function(){
                    alert("我切换了");
                });
            });
        })
    </script>
</head>
<body>
    <button id="btn">按钮</button>
    <br><br>
    <img src="../timg.png" width="400">
</body>
</html>

滑动效果

通过高度变化动态地显示或隐藏元素

$(selector).slideDown([speed], [easing], [fn])：通过调整高度来滑动显示元素
$(selector).slideUp([speed], [easing], [fn])：通过调整高度来滑动隐藏元素
$(selector).slideToggle([speed], [easing], [fn])：通过调整高度来切换元素的滑动显隐效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <script src="./jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <style type="text/css">
        #btn{
            display: block; width: 200px; height: 40px; margin: 50px auto;
        }
        img{
            /* display: none;  */
        }
    </style>
    <script>
        $(function(){
            // slideDown()：通过调整高度来滑动显示被选元素
            $("#btn").click(function(){
                // $("img").slideDown();
                // $("img").slideDown(2000);
                // $("img").slideDown(2000, function(){
                //     alert("我显示了");
                // });
            });

            // slideUp()：通过调整高度来滑动隐藏被选元素
            $("#btn").click(function(){
                // $("img").slideUp();
                // $("img").slideUp(2000);
                // $("img").slideUp(2000, function(){
                //     alert("我隐藏了");
                // });
            });

            // slideToggle()：通过调整高度来切换元素的滑动显隐效果
            $("#btn").click(function(){
                // $("img").slideToggle();
                // $("img").slideToggle(2000);
                $("img").slideToggle(2000, function(){
                    alert("我切换了");
                });
            });

        })
    </script>
</head>
<body>
    <button id="btn">按钮</button>
    <br><br>
    <img src="../timg.png" width="400">
</body>
</html>

淡入淡出

通过元素 “透明度”(opacity属性) 的变化动态地显示或隐藏元素

$(selector).fadeIn([speed], [easing], [fn])：淡入效果
$(selector).fadeOut([speed], [easing], [fn])：淡出效果
$(selector).fadeToggle([speed], [easing], [fn])：淡入淡出自动切换
$(selector).fadeTo(speed, opacity, [easing], [fn])：调整到指定不透明度，参数中的速度和透明度必须有

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <script src="./jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <style type="text/css">
        #btn{
            display: block; width: 200px; height: 40px; margin: 50px auto;
        }
        img{
            /* display: none;  */
        }
    </style>
    <script>
        $(function(){
            // fadeIn()：淡入效果
            $("#btn").click(function(){
                // $("img").fadeIn();
                // $("img").fadeIn(2000);
                // $("img").fadeIn(2000, function(){
                //     alert("我显示了");
                // });
            });

            // fadeOut()：淡出效果
            $("#btn").click(function(){
                // $("img").fadeOut();
                // $("img").fadeOut(2000);
                // $("img").fadeOut(2000, function(){
                //     alert("我隐藏了");
                // });
            });

            // fadeToggle(): 淡入淡出自动切换
            $("#btn").click(function(){
                // $("img").fadeToggle();
                // $("img").fadeToggle(2000);
                // $("img").fadeToggle(2000, function(){
                //     alert("我切换了");
                // });
            });

            // fadeTo(): 调整到指定不透明度
            $("#btn").click(function(){
                // 参数：速度必须有，透明度必须有，0至1之间表示透明度的数字，默认为0，全透明
                $("img").fadeTo(2000, 0.5);
            });

        })
    </script>
</head>
<body>
    <button id="btn">按钮</button>
    <br><br>
    <img src="../timg.png" width="400">
</body>
</html>

自定义动画

jQuery动画是通过将元素的某一个属性从“一个属性值”，在指定时间内平滑地过渡到“另一个属性值”来实现，原理跟CSS3动画原理是一样的

$(selector).animate(params, [speed], [easing], [fn])：自定义动画

参数说明

params：一组包含动画属性和最终样式属性值的集合
speed：速度（动画完成的时间）：毫秒数
easing：动画效果：默认变速“swing”，均速“liner”
fn：动画完成时执行的函数

注意：

所有指定的属性必须用驼峰命名形式，比如用marginLeft代替margin-left
字符串值无法创建动画(比如：background-color：red)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <script src="./jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <style type="text/css">
        #btn{
            display: block; width: 200px; height: 40px; margin: 50px auto;
        }
        #box{
            position: relative;
        }
        #div1, #div2{
            width: 100px; height: 50px; 
            background: orange; margin-top: 20px;
            position: absolute; left: 0;
        }
        #div1{
            top: 0;
        }
        #div2{
            top: 70px;
        }
        p{
            width: 10px; height: 150px;
            background: black;
            position: absolute; left: 800px;
        }
    </style>
    <script>
        $(function(){
            // 自定义动画
            $("#btn").click(function(){
                // $("img").animate({
                //     width:"600px",
                //     height:"600px",
                //     opacity:0.5
                // }, 2000, function(){
                //     alert("我是自定义动画");
                // });
            });

            // 自定义动画效果
            $("#btn").click(function(){
            	//$("#div1").animate({left:"700px"}, 3000);
                $("#div1").animate({left:"700px"}, 3000, "swing");//默认效果：变速
                $("#div2").animate({left:"700px"}, 3000, "linear");//均速
            });
        })
    </script>
</head>
<body>
    <button id="btn">按钮</button>
    <br><br>
    <img src="../timg.png" width="400">

    <div id="box">
        <div id="div1"></div>
        <div id="div2"></div>
        <p></p>
    </div>
</body>
</html>

停止运行的动画

$(selector).stop(stopAll, goToEnd)：停止当前正在运行的动画，动画会在当前位置停下来；如果有等待执行的队列动画，他们将马上执行
$(selector).finish()：停止当前正在运行的动画，删除所有队列的动画；所有队列的动画的CSS属性跳转到他们的最终值

参数说明

stopAll：可选。true：所有加入的队列动画都停止；false：当前动画停止，后面队列动画继续执行
goToEnd：可选。该参数只有在设置了stopAll参数为true时使用；true：允许完成当前的动画；false：不允许完成当前的动画
队列动画：就是有很多个动画接连一起，排队执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <script src="./jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <style type="text/css">
        button{
            display: block; width: 200px; height: 40px; margin: 50px auto;
        }
        #box{
            position: relative;
        }
        #div1{
            width: 100px; height: 50px; 
            background: orange; margin-top: 20px;
            position: absolute; top:60px; left: 0; 
        }
        p{
            width: 10px; height: 150px;
            background: black;
            position: absolute; left: 800px;
        }
    </style>
    <script>
        $(function(){
            // 开始动画
            $("#kaishi").click(function(){
                // $("#div1").animate({left:"700px"}, 5000);
                $("#div1").animate({left:"700px"}, 5000).fadeOut(2000);//队列动画
            });

            // 1、stop()：停止动画
            $("#tingzhi").click(function(){
                // $("#div1").stop();
                // $("#div1").stop(true);
                // $("#div1").stop(true, false);
                $("#div1").stop(true, true);
            });

            // 2、finish()：停止动画
            // $("#tingzhi").click(function(){
            //     $("#div1").finish();
            // });
        })
    </script>
</head>
<body>
    <button id="kaishi">开始</button>
    <button id="tingzhi">停止</button>
    <br><br>
    <div id="box">
        <div id="div1"></div>
        <p></p>
    </div>
</body>
</html>

延时执行动画

delay()：将队列中下一个动画延迟指定的时间后执行
jQuery.fx.off()：关闭页面上所有的动画
jQuery.fx.interval：设置动画的显示帧速。默认值为13

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <script src="./jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <style type="text/css">
        button{
            display: block; width: 200px; height: 40px; margin: 50px auto;
        }
        #box{
            position: relative;
        }
        #div1{
            width: 100px; height: 50px; 
            background: orange; margin-top: 20px;
            position: absolute; top:60px; left: 0; 
        }
        p{
            width: 10px; height: 150px;
            background: black;
            position: absolute; left: 800px;
        }
    </style>
    <script>
        $(function(){
            // delay()：延时执行动画
            $("#kaishi").click(function(){
                $("#div1").delay(3000).animate({left:"700px"}, 2000);
            });
        });
    </script>
</head>
<body>
    <button id="kaishi">开始</button>
    <br><br>
    <div id="box">
        <div id="div1"></div>
        <p></p>
    </div>
</body>
</html>