Objetivos

Vamos a poner en práctica los métodos de animación:
slideDown() , slideUp(), slideToggle()
Instrucciones:
Crea un fichero eventos.html
Copia en el fichero eventos.html, el código propuesto.
Visualiza el ejercicio y los efectos
Fuente del ejercicio: https://www.anerbarrena.com/jquery-slidedown-slideup-slidetoggle-3670/
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;}
        input{display: block;margin-top: 20px;}
    </style>
    <script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>

<body>
    <div id="rectangulo" style="padding:20px 20px 20px 20px; background-color:#004488; color:#fff;">Rectángulo de Ejemplo</div>
    <input type="button" id="up01" value="Ocultar con slideUp()">
    <input type="button" id="down01" value="Mostrar con slideDown()">
    <input type="button" id="up02" value="Ocultar con slideUp() en 4000 milisegundos">
    <input type="button" id="down02" value="Mostrar con slideDown() en 4000 milisegundos">
    <input type="button" id="up03" value="Ocultar con slideUp() con 'slow'">
    <input type="button" id="down03" value="Mostrar con slideDown() con 'fast'">
    <input type="button" id="up04" value="Ocultar con slideUp() con 'slow' y callback">
    <input type="button" id="down04" value="Mostrar con slideDown() con 'fast' y callback">
    <input type="button" id="toggle01" value="Mostrar / ocultar con slideToggle()">
    <input type="button" id="toggle02" value="Mostrar / ocultar con slideToggle() en 4000 milisengos">
    <input type="button" id="toggle03" value="Mostrar / ocultar con slideToggle() con 'slow' con callback">

    <script type="text/javascript">
        $(document).ready(function () {
            $("#down01").click(function (event) {
                $("#rectangulo").slideDown();
            });
            $("#down02").click(function (event) {
                $("#rectangulo").slideDown(4000);
            });
            $("#down03").click(function (event) {
                $("#rectangulo").slideDown("fast");
            });
            $("#down04").click(function (event) {
                $("#rectangulo").slideDown("fast", function () {
                    alert('Efecto slideDown con velocidad fast terminado!');
                });
            });

            $("#up01").click(function (event) {
                $("#rectangulo").slideUp();
            });
            $("#up02").click(function (event) {
                $("#rectangulo").slideUp(4000);
            });
            $("#up03").click(function (event) {
                $("#rectangulo").slideUp("slow");
            });
            $("#up04").click(function (event) {
                $("#rectangulo").slideUp("slow", function () {
                    alert('Efecto slideUp con velocidad slow terminado!');
                });
            });

            $("#toggle01").click(function (event) {
                $("#rectangulo").slideToggle();
            });
            $("#toggle02").click(function (event) {
                $("#rectangulo").slideToggle(4000);
            });
            $("#toggle03").click(function (event) {
                $("#rectangulo").slideToggle("slow", function () {
                    alert('Efecto slideToggle con velocidad slow terminado!');
                });
            });
        });
    </script>
</body>

</html>