jQuery中动画的有关方法_以下属于jquery中对角线动画的包括-CSDN博客

本文链接：https://blog.csdn.net/dwjdj/article/details/105918295

show和hide方法有参数
- 参数1:时间----1000毫秒----1秒
  - 参数2:回调函数----动画执行完毕后才执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .w{
            width: 300px;
            height: 300px;
            background-color: blue;
        }
    </style>
    <script src="../jquery-1.12.1.js"></script>
    <script>
        $(function () {
            $("#btn1").click(function () {
                $("#dv").show(2000,function () {
                    alert("雏菊");
                });
            });
            $("#btn2").click(function () {
                $("#dv").hide(2000,function () {
                    alert("我的野蛮女友");
                });
            });
        });
    </script>
</head>
<body>
<input type="button" value="显示" id="btn1">
<input type="button" value="隐藏" id="btn2">
<div id="dv" class="w"></div>
</body>
</html>

 * 参数1:时间----1000毫秒---1秒
 * 参数2:回调函数---动画执行完毕后才执行
 * slideDown()滑出
 * slideUp()滑入
 * slideToggle()切换滑入和滑出
 *
 * fadeIn()谈入
 * fadeOut()谈出
 * fadeToggle()切换淡入和淡出
 * 参数和上面相同
 * fadeTo(时间,透明值结束)
 *
 * 时间参数还可以是关键字:
 * slow 慢的
 * fast 快的
 * normal 正常
 * *

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: blue;
        }
    </style>
    <script src="../jquery-1.12.1.js"></script>
    <script>
        // $(function () {
        //     $("#btn1").click(function () {
        //         $("#dv").slideDown(2020,function () {
        //             alert("嚣张");
        //         });
        //     });
        //     $("#btn2").click(function () {
        //         $("#dv").slideUp(2020,function () {
        //             alert("嚣张吗");
        //         });
        //     });
        //     $("#btn3").click(function () {
        //         $("#dv").slideToggle(220);
        //     });
        // });

        $(function () {
            $("#btn1").click(function () {
                $("#dv").fadeIn("fast",function () {
                    alert("嚣张");
                });
            });
            $("#btn2").click(function () {
                $("#dv").fadeOut(2020,function () {
                    alert("嚣张吗");
                });
            });
            // $("#btn3").click(function () {
            //     $("#dv").fadeToggle(220);
            // });
            $("#btn3").click(function () {
                $("#dv").fadeTo(500,0.2);
            });
        });
    </script>
</head>
<body>
<input type="button" value="显示" id="btn1"/>
<input type="button" value="隐藏" id="btn2"/>
<input type="button" value="切换" id="btn3"/>
<div id="dv"></div>
</body>
</html>

animate方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #mg{
            position: absolute;
        }
    </style>
    <script src="../jquery-1.12.1.js"></script>
    <script>
        /*
        * 参数1:键值对----css属性和值
        * 参数2:时间----1000毫秒----1秒
        * 参数3:回调函数
        * */
        $(function () {
            $("#mg").animate({"width":"300px","height":"300px","top":"300px","left":"700px","opacity":"0.5"},800)
                .animate({"width":"500px","height":"500px","top":"200px","left":"200px"},800);
        });
    </script>
</head>
<body>
<img src="images/bird.png" alt="" id="mg"/>
</body>
</html>