0

Buenas aquí dejo mi siguiente código:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Ejercicio 4.1</title>
    <script
    src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
    integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
    crossorigin="anonymous"></script>
    <style>
        .oculto {
           /* background-color: blue; */
           display: none;
        }

    /*    div {
            width: 100px;
            border: 2px solid black;
            background-color: yellowgreen;
        } */

    </style>
</head>
<body>
    <ul>
        <li>Lista 1:            
            <ul>
                <li>
                    <p>Tortilla</p>
                </li>
                <li>
                    <p>Jamón</p>
                </li>
                <li>
                    <p>Queso</p>
                </li>
            </ul>
        </li>
           <li>Lista 2:
                <ul>
                    <li>
                        <p>Coca Cola</p>
                    </li>
                    <li>
                        <p>Leche</p>
                    </li>
                    <li>
                        <p>Té</p>
                    </li>
                </ul>
           </li>             
    </ul>

 <!--   <div>Aprietame! Duro</div> -->

    <script>
        $("ul li:first-child ul li:first-child").hover(function(){
            $(this).toggleClass("oculto");
        });

    /*    $("div").hover(function(){
            $("ul li:first-child ul li:first-child").addClass("oculto");
        }, function() {
            $("ul li:first-child ul li:first-child").removeClass("oculto");
        }); */

    </script>   
</body>
</html>

Como corregir el efecto display, aparece y desaparece muy rápido. Se que display no puede ser controlado por la propiedad transition. Algún consejo? Gracias

2
  • 1
    Pero ¿qué es lo que tratas de conseguir exactamente? Commented el 14 ene. 2018 a las 20:09
  • Los problemas sin un enunciado claro se consideran de baja calidad. Tal y como está redactada la pregunta ahora, es muy difícil entender qué es lo que estás intentando conseguir o cómo. Por favor, lee Cómo preguntar y edita la pregunta para que podamos ayudarte.
    – Alvaro Montoro
    Commented el 15 ene. 2018 a las 3:17

1 respuesta 1

2

Lo que podrías hacer es jugar con el tamaño y la opacidad para poder darle un buen efecto de salida al elemento.

Fijate que la propiedad height tiene que estar fijada inicialmente para que el efecto sea visible, sino será muy de golpe a pesar de la propiedad transition.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Ejercicio 4.1</title>
    <script
    src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
    integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
    crossorigin="anonymous"></script>
    <style>
        p { margin: 0; }
        ul ul li {
           cursor: pointer;
           height: 32px;
           margin-bottom: 8px;
           overflow: hidden;
           transition: 1s ease;
        }
        .oculto {
           height: 0;
           opacity: 0;
        }
    </style>
</head>
<body>
    <ul>
        <li>Lista 1:            
            <ul>
                <li>
                    <p>Tortilla</p>
                </li>
                <li>
                    <p>Jamón</p>
                </li>
                <li>
                    <p>Queso</p>
                </li>
            </ul>
        </li>
        <li>Lista 2:
             <ul>
                 <li>
                     <p>Coca Cola</p>
                 </li>
                 <li>
                     <p>Leche</p>
                 </li>
                 <li>
                     <p>Té</p>
                 </li>
             </ul>
        </li>             
    </ul>

    <script>
        $("ul ul li").click(function(){
            $(this).toggleClass("oculto");
        });
    </script>   
</body>
</html>

Nota: Cambie el evento al click (en este caso se aprecia mejor el ejemplo con este evento)

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.