08/effect.html

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>effect</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.7.1.min.js"></script>
    <style>
        body {text-align: center;}
        h3 {display: block; width: 200px; border: 1px solid; margin: 20px auto; }
        .objtxt {background-color: aqua; display: none;}
    </style>
    <script>
        $(function(){

            // Show
            $("button:eq(0)").click(function(){
                $(".targets *").show(200);
            })

            $("button:eq(1)").click(function(){
                $(".targets *").hide("slow", function(){
                    // alert("hide");
                });
            })

            $("button:eq(2)").click(function(){
                $(".targets *").toggle();
            })

            // Slide
            $("button:eq(3)").click(function(){
                $(".targets *").slideDown(2000);
            })

            $("button:eq(4)").click(function(){
                $(".targets *").slideUp("slow", function(){
                    // alert("hide");
                });
            })

            $("button:eq(5)").click(function(){
                $(".targets *").slideToggle();
            })

            // Fade
            $("button:eq(6)").click(function(){
                $(".targets *").fadeIn(2000);
            })

            $("button:eq(7)").click(function(){
                $(".targets *").fadeOut("slow", function(){
                    // alert("hide");
                });
            })

            $("button:eq(8)").click(function(){
                $(".targets *").fadeToggle();
            })

            $("button:eq(9)").click(function(){
                $(".targets *").fadeTo(500, parseInt(Math.random() * 11) / 10);
            })
        });
    </script>
</head>
<body>
    <div class="btn-wrap">
        <h3>toggle</h3>
        <button>show</button>
        <button>hide</button>
        <button>toggle</button>
        <h3>slide</h3>
        <button>slideDown</button>
        <button>slideUp</button>
        <button>slideToggle</button>
        <h3>fade</h3>
        <button>fadeIn</button>
        <button>fadeOut</button>
        <button>fadeToggle</button>
        <button>fadeTo</button>
    </div>
    <hr>
    <div class="targets">
        <h3 class="objtxt">Object Text</h3>
        <h3 class="objtxt">Object Text</h3>
        <h3 class="objtxt">Object Text</h3>
        <h3 class="objtxt">Object Text</h3>
        <h3 class="objtxt">Object Text</h3>
    </div>
</body>
</html>