jQuery事件与动画操作详解-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_70815247/article/details/126320538

这篇博客详细介绍了jQuery中的事件处理，包括visible和hidden选择器、元素的添加与删除、事件绑定如bind和on，以及键盘事件和各种动画效果如fadeIn、fadeOut、slideDown和slideUp。还特别强调了轮播图的动画实现，利用animate函数创造动态效果。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.6.0/jquery-3.6.0.js"></script>
    <style>
        body{
            background-color: black;
        }
        li{
            margin: 8px 5px;
            list-style: none;
        }
        ul{
            padding: 0;
            margin: 0;
            display: flex;
            flex-wrap: wrap;
        }
        .wrap{
            border: 1px solid #ffffff;
            width: 630px;
            height: 410px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <ul>
            <li><a href="#"><img src="img/01.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/02.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/03.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/04.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/05.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/06.jpg" alt=""></a></li>
        </ul>
    </div>
    <script>
        $(function(){
            //给li标签绑定鼠标移入的事件
            $("ul li").mouseover(function(){
                // 如何获取到当前鼠标移入的li标签，this
                $(this).css("opacity",1).siblings().css("opacity",0.5)
                // 给鼠标移入的li标签的opacity设置为1，给其他兄弟的opacity的值设置为0.5
            })
            $("ul li").mouseout(function(){
                $(this).css("opacity",1).siblings().css("opacity",1)
            })
        })
    </script>
</body>
</html>

visible 用来获取可见的元素

hidden 用来获取到隐藏的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.6.0/jquery-3.6.0.js"></script>
    <style>
        div{
            margin-top: 10px;
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
    </style>
</head>
<body>
   <div></div>
   <div></div>
   <input type="button" value="隐藏" id="xs">
   <input type="button" value="显示" id="yc">
   <script>
       $("#xs").click(function(){
        $("div:visible").hide(1000)
       })
       $("#yc").click(function(){
        $("div:hidden").show(1000)
       })
   </script>
</body>
</html>

addClass 给元素添加 class 如果元素上已经有其他的 class name ，那么将会新增加的追加到现有的classname后面

removeClass 可已经元素的某个class移除，如果为传参数则可以元素上的class的所有class移除掉

hasClass() 用于判断元素上是否有class 如果有就返回true 如果没有就返回false

toggleClass("bigger")切换可用于样式的切换 toggkleClass() 用于样式的切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.6.0/jquery-3.6.0.js"></script>
    <style>
        ul{
            display: flex;
        }
        li{
            margin-right: 20px;
            list-style: none;
            width: 100px;
            height: 100px;
            border: 1px solid black;
            text-align: center;
            line-height: 100px;
        }
        .basic{
            background-color: aqua;
        }
        .bigger{
            color: blueviolet;
            font-size: 30px;
        }
        .lianshi{
            font-weight: 800;
        }
    </style>
</head>
<body>
    <input type="button" value="添加basic类">
    <input type="button" value="添加bigger类">
    <input type="button" value="移除bigger类">
    <input type="button" value="判断bigger类">
    <input type="button" value="切换">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
   <script>
       $(function(){
        //    addClass():给元素添加class，如果元素上已经有其他的类，那么将会新的追加到现有的className后面
           $("input:first").click(function(){
            //    现获取到所有的li
            //    然后再给这些li添加class
               $("ul li").addClass("basic").addClass("lianshi")
           })

           $("input:eq(1)").click(function(){
               $("ul li").addClass("bigger")
           })

           $("input:eq(2)").click(function(){
            //    removeClass():可以将元素的某个class移除，如果未传参数，则可以将元素上的所有class移除掉
               $("ul li").removeClass("bigger")
           })

           $("input:eq(3)").click(function(){
            //    hassClass():用来判断元素上是否有某个class，如果有，则返回true，反之则返回false
            //    如下代码用来判断是否有bigger，如果没有进行添加
               if (!$("ul li").hasClass("bigger")) {
                   $("ul li").addClass("bigger")
               }
           })

           $("input:eq(4)").click(function(){
            //    切换
               $("ul li").toggleClass("basic")
           })
       })
   </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.6.0/jquery-3.6.0.js"></script>
    <style>
        ul{
            display: flex;
        }
        li{
            border: 1px solid white;
            list-style: none;
            background-color: rgb(255, 61, 61);
            width: 100px;
            text-align: center;
            height: 30px;
            line-height: 30px;
        }
        div{
            display: none;
            width: 300px;
            height: 50px;
            background-color: blue;
        }
       .active{
           background-color: aqua;
       }
       .active_div{
        display: block;
       }
    </style>
</head>
<body>
    <nav>
        <ul>
            <li><a class="active" href="#">HOME</a></li>
            <li><a href="#">ABOUT</a></li>
            <li><a href="#">LOGIN</a></li>
        </ul>
    </nav>
    <main>
        <div class="active_div">HOME</div>
        <div>ABOUT</div>
        <div>LOGIN</div>
    </main>
    <script>
        $(function(){
            $("ul li").click(function(){
                $(this).children("a").addClass("active").parent().siblings("li").children("a").removeClass("active")
                var index=$(this).index()
            $("div").eq(index).addClass("active_div").siblings("div").removeClass("active_div")
            })
           
        })
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.6.0/jquery-3.6.0.js"></script>
    <style>
        .div1{
            width: 200px;
            height: 170px;
            border: 1px solid black;
        }
        .div2{
            height: 50px;
            background-color: aqua;
        }
        ul{
            display: flex;
            flex-wrap: wrap;
            margin: 0;
            padding: 0 10px;
        }
        
        li{
            width: 60px;
            list-style: none;
        }  
        
    </style>
</head>
<body>
    <div class="div1">
        <div class="div2">图书分类</div>
        <div class="div3">
            <ul>
                <li>小说</li>
                <li>文艺</li>
                <li>小说</li>
                <li>小说</li>
                <li>小说</li>
                <li>小说</li>
                <li>小说</li>
                <li>小说</li>
                <li>小说</li>
                <li>小说</li>
                <li>小说</li>
                <li>小说</li>
            </ul>
            <a href="#" id="a">简化</a>
        </div>
    </div>
    <script>
        $(function(){
            $("#a").click(function(){
                if ($(this).text()=="简化") {
                    $("ul li:gt(4):not(:last)").hide()
                    $(this).text("更多")
                } else {
                    $("ul li:gt(4):not(:last)").show()
                    $(this).text("简化")
                }
            })
        })
    </script>
</body>
</html>

jQuery添加元素

通过JavaScript操作DOM,来实现获取页面元素,做一些修改等,同样的利用jQuery也可以操作DOM.append(方法在被选元素的结尾插入指定内容

添加元素
append()
append()方法是在被选元素的最后添加新元素。

prepend()
prepend()方法是在被选元素的最前面添加新元素。

before()
before()方法是在被选元素的前面添加新元素。

after
after()方法是在被选元素的后面添加新元素。

注：以上四种方法都可以一次添加多个元素；添加的元素以参数的形式植入，以逗号隔开。

删除元素

remove()

remove()方法是删除被选元素以及其子元素。

empty()

empty()方法是删去被选元素的子元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.6.0/jquery-3.6.0.js"></script>
    <style>
        li{
            list-style: none;
            width: 500px;
        }
        li:nth-child(2n){
            background-color: aqua;
        }
        li:nth-child(2n-1){
            background-color: rgb(71, 224, 163);
        }
    </style>
</head>
<body>
    <button id="btn1">append添加</button>
    <button id="btn2">appendTo添加</button>
    <button id="btn3">prepend添加</button>
    <button id="btn4">prependTo添加</button>
    <button id="btn5">before添加</button>
    <button id="btn6">after添加</button>
    <button id="btn7">remove清除</button>
    <button id="btn8">empty移除</button>
    <button id="btn9">replaceWith替换</button>
    <button id="btn10">replaceAll替换</button>
    <button id="btn11">clone复制</button>
    <p></p>
    <ul>
        <li>香蕉</li>
        <li>苹果</li>
        <li>菠萝</li>
    </ul>
    <script>
        // append(),appendTp(),prepend(),prependTo()都是给某元素前面/后面添加子元素
        // before()/after():指的是给某元素前面/后面添加兄弟元素
        $(function(){
            $("#btn1").click(function(){
                $("ul").append("<li>鸭梨</li>")
            })

            $("#btn2").click(function(){
                $("<li>西瓜</li>").appendTo("ul")
            })

            $("#btn3").click(function(){
                $("ul").prepend("<li>橘子</li>")
            })

            $("#btn4").click(function(){
                $("<li>橙子</li>").prependTo("ul")
            })

            $("#btn5").click(function(){
                $("ul").before("<p>123</p>")
            })

            $("#btn6").click(function(){
                $("ul").after("<p>123</p>")
            })

            $("#btn7").click(function(){
                $("ul li").remove(":eq(1)")
            })

            $("#btn8").click(function(){
                // empty():移除的是元素中的内容以及子元素，不包括他们身 
                $("ul").empty()
            })

            $("#btn9").click(function(){
                // $(选择器).replaceWith(替换内容)
                $("ul li").eq(1).replaceWith("<li><a href='#'></a></li>")
            })

            $("#btn10").click(function(){
                // $(conent).replaceAll(selector):将内容替换到目标元素上
                $("<li><a href='#'>西瓜</a></li>").replaceAll("ul li:eq(1)")
            })
            
            $("#btn11").click(function(){
                // $(selector).clone():复制元素
                // 如下代码是，将复制的元素替换到目标元素上
                $("ul li:eq(2)").clone().replaceAll("ul li:eq(1)")
            })
        })
    </script>
</body>
</html>

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.6.0/jquery-3.6.0.js"></script>
    <style>
    </style>
</head>
<body>
    <p>
       学号 <input type="text" id="text1">姓名
        <input type="text" id="text2">年龄
        <input type="text" id="text3">
        <input type="button" id="btn1" value="添加">
        <input type="button" id="btn2" value="删除">
    </p>
    <table>
        <tr>
            <th>
                <input type="checkbox" name="" id="selectAll">
            </th>
            <th>学号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>
                <input type="checkbox" >
            </td>
            <td>1001</td>
            <td>张三</td>
            <td>20</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" >
            </td>
            <td>1002</td>
            <td>李四</td>
            <td>20</td>
        </tr>
    </table>
    <script>
        $(function(){
            $("#btn1").click(function(){
                // 将信息添加到table中,使用append()实现向table中添加一行
                // 首先获取到文本框输入的信息
                var stuid = $("#text1").val()
                var stuname = $("#text2").val()
                var stuage = $("#text3").val()
                // 将这些信息跟tr，td进行字符串拼接
                var tr=$("<tr><td><input type='checkbox'></td><td>"+stuid+"</td><td>"+stuname+
                    "</td><td>"+stuage+"</td><tr>")
                        // 最后调用append()函数实现
                $("table").append(tr)
            })
            // 删除
            $("#btn2").click(function(){
                // 找到删除的元素       parent()该元素的父元素
                $("table tr td input:checked").parent().parent().remove()
            })
        })
    </script>
</body>
</html>

bind ()

方法向被选元素添加一个或多个事件处理程序，以及当事件发生时运行的函数。

on()

on()函数用于为指定元素的一个或多个事件绑定事件处理函数。

此外，你还可以额外传递给事件处理函数一些所需的数据。

从jQuery 1.7开始，on()函数提供了绑定事件处理程序所需的所有功能，用于统一取代以前的bind()、 delegate()、 live()等事件函数。

on()支持直接在目标元素上绑定事件，也支持在目标元素的祖辈元素上委托绑定。在事件委托绑定模式下，即使是执行on()函数之后新添加的元素，只要它符合条件，绑定的事件处理函数也对其有效。

此外，该函数可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。

要删除通过on()绑定的事件，请使用off()函数。如果要附加一个事件，只执行一次，然后删除自己，请使用one()函数。

该函数属于jQuery对象(实例)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.6.0/jquery-3.6.0.js"></script>
    <style>
        div{
            width: 200px ;
            height: 200px;
            border: 1px solid black;
            text-align: center;
            line-height: 200px;
            margin-bottom: 10px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
   <div>这是一个div</div>
   <input type="button" value="添加" id="btn">
   <script>
       $(function(){
        //    点击
        //    $("div").click(function(){
        //        $(this).css("background-color","red")
        //    })
        // 鼠标移入
        //    $("div").mouseover(function(){
        //        $(this).css("background-color","pink")
        //    })
        // 鼠标移出
        //    $("div").mouseout(function(){
        //        $(this).css("background-color","aqua")
        //    })


        // 其他的绑定方法：第一种   bind（事件类型，事件处理函数）
        // $("div").bind("click",function(){
        //        $(this).css("background-color","red")
        //    })
        // // 鼠标移入
        //    $("div").bind("mouseover",function(){
        //        $(this).css("background-color","pink")
        //    })
        // // 鼠标移出
        // $("div").bind("mouseout",function(){
        //        $(this).css("background-color","aqua")
        //    })

        // 第二种   一次绑定多个事件
        $("div").on({
            "click":function(){
            $(this).css("background-color","red")
            },
            "mouseover":function(){
            $(this).css("background-color","pink")  
            },
            "mouseout":function(){
            $(this).css("background-color","aqua")
            }
        })

        $("#btn").click(function(){
            $("body").append("<div>新添加的div</div>")
        })
        // 第三种情况下：on进行绑定事件时可以实现动态绑定
        // 实现body标签中的所有div能够绑定上click事件

        // 获取选择器.on("事件",选择器)
        $("body").on("click","div",function(){
            $(this).css("color","red")
        })
       })
   </script>
</body>
</html>

键盘事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.6.0/jquery-3.6.0.js"></script>
    <style>
        div{
            margin-top: 10px;
            width: 100px;
            height: 100px;
            background-color: aqua;
            left: 0;
            position: absolute;
        }
    </style>
</head>
<body>
   <div></div>
   <script>
       var x = 0
       $(document).on("keydown",function(event){
           switch (event.keyCode) {
               case 65:
                   $("div").css("background-color","red")
                   break;
                case 66:
                   $("div").css("background-color","pink")
                   break;
                case 67:
                   $("div").css("background-color","yellow")
                   break;
                case 68:
                   $("div").css("background-color","aqua")
                   break;
                case 39:
                    x += 5
                   $("div").css("left",x + "px")
                   break;
               default:
                   break;
           }
       })
   </script>
</body>
</html>

一、show和hide（隐藏显示）

1、show:最终状态是 display:block;

hide:最终状态是 display:none;

（toggle：切换）

2、语法：show（毫秒数，回调函数）

3、注意：

①当jq对象没有处于最终状态时，当动画执行完毕后，才会触发，回调函数；

②当jq对象处于最终状态时，立马执行，回调函数；

③如果当前的jq对象处于动画的最终状态则不会重复执行

二、fadeIn和fadeOut（淡入淡出）

1、fadeIn:最终状态是 display:block;

fadeOut:最终状态是 display:none;

（fadeToggle：切换）

2、语法：

jq对象.fadeIn(参数1，参数2)；

jq对象.fadeOut(参数1，参数2)；

3、注意：

（1）参数可选可写可不写

（2）参数1 动画执行的毫秒数；参数2 动画执行完毕后触发的回调函数

（3）当jq对象处于当前动画的终点则回调函数立马触发

三、slideDown和slideUp（隐藏显示）

1、slideDown:最终状态是 display:block;

slideUp:最终状态是 display:none;

（slideToggle：切换）

2、语法：

slideDown(参数1，参数2)

slideUp(参数1，参数2)

3、注意：

（1）参数1和参数2都是可选的，可有可无的；

（2）参数1 是毫秒数

（3）参数2 是回调函数

①当触发动画的jq对象没有处于最终状态则动画执行完毕后才会去执行回调函数

②当触发动画的jq对象，处于最终状态，则立即执行回调函数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.6.0/jquery-3.6.0.js"></script>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    
    <button class="btn1">隐藏</button>
    <button class="btn2">显示</button>
    <button class="btn3">交替</button>
    <button class="btn4">淡入</button>
    <button class="btn5">淡出</button>
    <button class="btn6">交替</button>
    <button class="btn7">上收起</button>
    <button class="btn8">下显示</button>
    <button class="btn9">交替</button>
    <div class="box"></div>
   <script>
       $(function(){
        // 隐藏
           $(".btn1").click(function(){
               $("div").hide(1000)
           })
        //    显示
           $(".btn2").click(function(){
               $("div").show(1000)
           })
        //    交替
           $(".btn3").click(function(){
               $("div").toggle(1000)
           })
        //    淡入
           $(".btn4").click(function(){
               $("div").fadeIn(1000)
           })
        //    淡出
           $(".btn5").click(function(){
               $("div").fadeOut(1000)
           })
        //    交替
           $(".btn6").click(function(){
               $("div").fadeToggle(1000)
           })
        //    上收起
           $(".btn7").click(function(){
               $("div").slideUp(1000)
           })
        //    下显示
           $(".btn8").click(function(){
               $("div").slideDown(1000)
           })
        //    交替
           $(".btn9").click(function(){
               $("div").slideToggle(1000)
           })
       })
   </script>
</body>
</html>

轮播图！！！！！！！！！！！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.6.0/jquery-3.6.0.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .slider{
            height: 340px;
            width: 790px;
            margin: 100px auto;
            position: relative;
        }
        .slider li{
            position: absolute;
            display: none;
        }
        .slider li:first-child{
            display: block;
        }
        .arrow{
            display: none;
        }
        .slider:hover .arrow{
            display: block;
        }
        .arrow-left,
        .arrow-right{
            font-family: "SimSun","宋体";
            width: 30px;
            height: 60px;
            background-color: rgba(0, 0, 0, 0.1);
            position: absolute;
            top: 50%;
            margin-top: -30px;
            cursor: pointer;
            text-align: center;
            line-height: 60px;
            color: #fff;
            font-weight: 700;
            font-size: 30px;
        }
        .arrow-left:hover,
        .arrow-right:hover{
            background-color:rgba(0, 0, 0, 0.5) ;
        }
        .arrow-left{
            left: 0;
        }
        .arrow-right{
            right: 0;
        }
    </style>
</head>
<body>
    <div class="slider">
        <ul>
            <li><a href="#"><img src="img/1.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/2.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/3.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/4.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/5.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/6.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/7.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/8.jpg" alt=""></a></li>
        </ul>
        <!-- 箭头 -->
        <div class="arrow">
            <span class="arrow-left">&lt;</span>
            <span class="arrow-right">&gt;</span>
        </div>
    </div>
    <script>
        $(function(){
            var index = 0
            $(".arrow-left").click(function(){
                index--
               if (index==-1) {
                   index=$("ul li").length-1
               }
                $("li").fadeIn(1000).eq(index).siblings().fadeOut(1000).hide()
            })

            $(".arrow-right").click(function(){
                index++
               if (index>$("ul li").length-1) {
                   index=0
               } 
                $("li").fadeIn(1000).eq(index).show().siblings().fadeOut(1000).hide()
            })
        })
    </script>
</body>
</html>

jQuery提供了一个animate函数，可以通过改变CSS属性来实现一些动画效果。

用法如下：

.animate( properties[, duration ][, easing ][, complete ])

或者

.animate( properties, options )，其中 options 包含了duration、easing、queue、specialEasing、step、progress、complete、done、fail、always等多个属性。

animate函数允许我们在所有使用数字值的CSS属性上创建动画效果。唯一必须的属性是一个 CSS 属性对象。例如：

$('.class').animate({

left:"100"

});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.6.0/jquery-3.6.0.js"></script>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: aqua ;
            position: absolute;
        }
    </style>
</head>
<body>
    <button class="btn">点击动画</button>
    <hr>
    <div>动画</div>
    <script>
        $(function(){
            $(".btn").on("click",function(){
                $("div").animate({
                    "left":"500px",
                    "top" :"400px"
                }).animate({
                    "font-size":"50px"
                })
            })
        })
    </script>
</body>
</html>