jquery 学习 - 常用动态效果

Posted 2021-01-16 Anec

<!--转载于 听说你的代码很6-->
<!--http://www.jq22.com/webqd2377-->

CSS

    <style>
        #content #first {
            color:white;
            background-color:green;
            width:240px;
            height:100px;
            margin:10px 0 0 0;
            padding:10px;
        }
    </style>

html

    <div id="content">
    <input id="testhide" type="button" value="隐藏">
    <input id="testshow" type="button" value="显示">
    <input id="testtoggle" type="button" value="隐藏/显示">
    <input id="testslideup" type="button" value="上滑隐藏">
    <input id="testslidedown" type="button" value="下滑显示">
    <input id="testslidetoggle" type="button" value="上/下滑显示">
    <input id="testfadein" type="button" value="淡入显示">
    <input id="testfadeout" type="button" value="淡出显示">
    <input id="testfadetoggle" type="button" value="淡入/出显示">
    <input id="testanimate" type="button" value="自定义显示">
    <div id="first">
        想要做一件事，永远都不要怕晚。只要你开始做了，就不晚。而若是你不开始，仅仅停留在思考、犹豫甚至焦虑的状态，那就永远都是零。
    </div>

 

jquery

    <script src="jquery-3.3.1.js"></script>
        <script>
            $(document).ready(function() {
        $("#testhide").click(function() {
            // 动画效果
            $("#first").hide("slow");
        });
        $("#testshow").click(function() {
            // 动画效果
            $("#first").show("slow");
        });
        $("#testtoggle").click(function() {
            // 动画效果
            $("#first").toggle("slow");
        });
        $("#testslideup").click(function() {
            // 动画效果
            $("#first").slideUp("slow");
        });
        $("#testslidedown").click(function() {
            // 动画效果
            $("#first").slideDown("slow");
        });
        $("#testslidetoggle").click(function() {
            // 动画效果
            $("#first").slideToggle("slow");
        });
        $("#testfadein").click(function() {
            // 动画效果
            $("#first").fadeIn("slow");
        });
        $("#testfadeout").click(function() {
            // 动画效果
            $("#first").fadeOut("slow");
        });
        $("#testfadetoggle").click(function() {
            // 动画效果
            $("#first").fadeToggle("slow");
        });
        $("#testanimate").click(function() {
            // 动画效果
            $("#first").animate({
                fontSize: "12px"
            }, "slow");
        });
    });
        </script>