测开之路一百零一：jquery文字特效、动画、方法链

文字特效

html内容

1、卷起/展开

测开之路一百零一：jquery文字特效、动画、方法链

2、隐藏/显示

测开之路一百零一：jquery文字特效、动画、方法链

3、淡入淡出

测开之路一百零一：jquery文字特效、动画、方法链

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<script src="../js/jquery-3.4.1.min.js"></script>-->

    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<h1>jQuery特效</h1>

<p>第一个p标签
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab architecto blanditiis commodi, corporis deserunt
    ducimus ea, error expedita hic id ipsa itaque numquam obcaecati odit optio similique tempora tenetur
    voluptatibus.</p>

<p>第二个p标签
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab architecto blanditiis commodi, corporis deserunt
    ducimus ea, error expedita hic id ipsa itaque numquam obcaecati odit optio similique tempora tenetur
    voluptatibus.</p>

    <button ).slideToggle(2000);
        });
    });
</script>

动画，其实就是一系列的css变化效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画，就是一系列的css变化效果</title>
    <style>
        #box{
            position: relative;
            width: 200px;
            height: 200px;
            background-color: blue;
            border: 1px solid black;
        }
    </style>
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
    <button )
            )
        });
    });
</script>

测开之路一百零一：jquery文字特效、动画、方法链

方法链：对同一个元素连续操作

测开之路一百零一：jquery文字特效、动画、方法链