<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        p {
            display: none;
            font-size: 18px;
            padding: 10px;
            border: 1px solid black;
            width: 50%;
            text-align: center;
        }
        button {
            margin: 10px;
            padding: 10px;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <button id="fadeInBtn">Fade In Paragraphs</button>
    <button id="fadeOutBtn">Fade Out Paragraphs</button>
    <p>This is the first paragraph.</p>
    <p>This is the second paragraph.</p>
    <p>This is the last paragraph.</p>
    <script>
        $(document).ready(function() {
            $("#fadeInBtn").click(function() {
                $("p").fadeIn("slow");
            });

            $("#fadeOutBtn").click(function() {
                $("p").fadeOut("fast"); 
            });
        });
    </script>
</body>
</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.