web基础学习笔记(二十)之jquery动画操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="style.css" type="text/css" rel="stylesheet">
    <script src="jquery/jquery-3.5.1.js"></script>
    <script type="text/javascript">
        $(function () {
            //显示
            $("#btn1").click(function () {
                $("#div1").show(1000,function () {
                    alert("show动画完成")
                });   /*可以加时间和回调函数*/
            });
            //隐藏
            $("#btn2").click(function () {
                $("#div1").hide();
            });
            //切换
            $("#btn3").click(function () {
                $("#div1").toggle();
            });

            /*
            循环进行动画
            var abc = function(){
                $("#div1").toggle(1000,abc);
            };
            abc();*/

            //淡入
            $("#btn4").click(function () {
                $("#div1").fadeIn();
            });
            //淡出
            $("#btn5").click(function () {
                $("#div1").fadeOut(2000);  /*2000ms  可加时间和函数 同上*/
            });
            //淡化到
            $("#btn6").click(function () {
                $("#div1").fadeTo(1000,0.5,function () {
                    alert("变半透明");
                });
            });
            //淡化切换
            $("#btn7").click(function () {
                $("#div1").fadeToggle()
            });
        });
    </script>
</head>
<body>
    <!--jquery动画操作

    基本动画:
        show()将隐藏的元素显示
        hide()将可见的元素隐藏
        toggle()可见就隐藏不可见就显示
    动画效果:
        slideDown()
        slideUp()
        slideToggle()
        fadeIn()淡入
        fadeOut()淡出
        fadeTo()淡化到     在指定的时长内慢慢将透明度修改到指定的位置,0透明  1完全可见   0.5半透明
        fade TOggle()淡化切换-->
    <table style="...">
        <tr>
            <td><button id="btn1">显示show()</button> </td>
        </tr>
        <tr>
            <td><button id="btn2">隐藏hide()</button> </td>
        </tr>
        <tr>
            <td><button id="btn3">显示/隐藏切换toggle()</button> </td>
        </tr>
        <tr>
            <td><button id="btn4">淡入fadeIn()</button> </td>
        </tr>
        <tr>
            <td><button id="btn5">淡出fadeOut()</button> </td>
        </tr>
        <tr>
            <td><button id="btn6">淡化到fadeTo()</button> </td>
        </tr>
        <tr>
            <td><button id="btn7">淡化切换fadeToggle()</button> </td>
        </tr>
        <div id="div1" >
            jquery动画定义了很多动画效果,可以很方便的使用这些动画效果
        </div>
    </table>
</body>
</html>
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页