index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery animation methods</title>
    <link rel="stylesheet" href="./style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" "></script>
    <script src="./main.js"></script>
</head>

<body>
    <div class="button-container">
        <button id="showButton">Show</button>
        <button id="hideButton">Hide</button>
        <button id="fadeInButton">Fade In</button>
        <button id="fadeOutButton">Fade Out</button>
        <button id="fadeToButton">Fade To</button>
        <button id="slideDownButton">Slide Down</button>
        <button id="slideUpButton">Slide Up</button>
        <button id="slideToggleButton">Slide Toggle</button>
        <button id="animateButton">Animate</button>
        <button id="stopButton">Stop</button>
        <button id="delayButton">Delay</button>
    </div>
    <div id="element">
        Hello, I am an element!
    </div>
    <ul>
        <li>Show: Показує елемент.</li>
        <li>Hide: Ховає елемент.</li>
        <li>Fade In: Плавно показує елемент.</li>
        <li>Fade Out: Плавно ховає елемент.</li>
        <li>Fade To: Змінює прозорість елемента до 50%.</li>
        <li>Slide Down: Плавно розгортає елемент.</li>
        <li>Slide Up: Плавно згортання елемента.</li>
        <li>Slide Toggle: Перемикає між показом і приховуванням елемента.</li>
        <li>Animate: Анімує властивості CSS, такі як прозорість та позиція.</li>
        <li>Stop: Зупиняє всі поточні анімації на елементі.</li>
        <li>Delay: Затримує виконання анімації на задану кількість мілісекунд.</li>
    </ul>
</body>

</html>