jQuery入门-4,jQuery动画_jquery 弹跳动画-优快云博客

本文链接：https://blog.youkuaiyun.com/Mr_Sunset/article/details/81394978

本文通过实例展示了如何使用jQuery来实现元素的隐藏、显示及动画效果，包括淡入淡出、滑动等基本动画，并介绍了动画队列的用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

动画还是代码效果演示比较好,复制粘贴,浏览器打开,根据注释理解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        #d2{
            width: 100px;height: 100px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <button id="hide">消失</button>
    <button id="show">出现</button>

    <div id="box">要隐藏的div</div>

    <hr>

    <button id="ani-btn">开始动画</button>
    
    <div id="d2"></div>

<script src="jquery.js"></script>
<script>
    $("#hide").on("click",function(){
        // jq对象的hide方法,用于隐藏元素(display:none)
        // $("#box").hide();
        
        // jq动画的本质是js动画,是通过requestAnimationFrame实现的动画
        
        // jq对象的fadeOut方法,用于动画(淡入淡出)隐藏一个元素,参数为动画时间,不写默认300毫秒
        // $("#box").fadeOut(300);

        // jq对象的.slideUp方法,用于上拉隐藏元素
        $("#box").slideUp(1000);

    });
    $("#show").on("click",function(){
        // jq对象的hide方法,用于显示元素(删除display:none)
        // $("#box").show();
        
        // 动画出现(淡入淡出)
        // $("#box").fadeIn();

        // jq对象的.slideDown方法,用于下拉显示元素
        $("#box").slideDown();

    })

    // ---------------------------------------------------
    $("#ani-btn").on("click",function(){
        // jq对象的.animate方法,用于让元素执行动画(本质是js动画),第一个参数是动画目标样式,是一个对象;第二个参数是动画时间,单位毫秒;第三个参数是动画结束时的回调函数
        // 回调函数:一般作为一个参数传递给一个任务,这个任务在触发某个条件时会调用回调函数
        // .animate可以链式调用,生成一个连续执行的动画队列
        $("#d2").animate({
            width:"200px",
            "margin-left":"100px",
        },1000,function(){
            console.log(123)
        })
        .animate({
            width:"100px",
            "margin-left":"50px",
        },1000);
    });
</script>
</body>
</html>