0

Tengo un menú lateral #elemIzq que está posicionado a la izquierda de la pantalla. Le he puesto un left: -295px para que sea oculto, y así mostrar todo el contenido con un click, de izquierda a derecha.

Ahora estoy trabajando con la función hover, para que una vez que el ratón esté fuera del navegador, vuelva a esconderse.

El problema es que no quiero que se aplique ese hover, hasta que el elemento no haya cogido la posición left: 0px. ¿Podría hacerlo?

Código:


 $('#elemIzq').hover(function () {}, function () {
     $("#elemIzq").removeClass("desplegado");
 });

(La clase desplegado es la que le hace tener una posicion left: 0px).

1
  • 1
    en la funcion hover prueba a añadir una condición que mire la posicion de elemento.
    – lois6b
    Commented el 20 feb. 2018 a las 9:37

2 respuestas 2

2

Yo usaría $.animate() para animar el lateral y así lanzar la animación cuando termine. Para ocultar el menú usaría el segundo callback de $.hover()

$('#elemIzq').hover(
    function(){
        $("#elemIzq").stop().animate({width:200}, 400, 'swing', function(){
            $("#elemIzq").removeClass("desplegado");
        })
    }, function(){
        $("#elemIzq").stop().animate({width:100}, 400, 'swing', function(){
            $("#elemIzq").addClass("desplegado");
        })
    }
)
#elemIzq{
  cursor: pointer;
  background-color: red;
  width: 200px;
  color: white;
}
#elemIzq.desplegado{
  background-color: blue;
  width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="elemIzq" class="desplegado">
  HOVER ME
</div>

Ejemplo en CodePen

*Edito: Añado el .stop(), que hace que la animación se termine en el momento en que sales de pantalla.

3
  • Buenas Jandro. Te he editado la respuesta para añadir el codigo para probar aqui mismo y asi no es necesario ir a otra pagina para verlo :P Un saludo
    – lois6b
    Commented el 20 feb. 2018 a las 10:46
  • Genial. Aunque llevo tiempo registrado es la primera vez que empiezo a usar esta plataforma. Lo tendré en cuenta para próximas aportaciones. Commented el 20 feb. 2018 a las 10:53
  • Hay muchas cositas a las que ir cogiendo el tranquillo asi que paciencia hahah analiza la respuesta en modo edit para ver como funciona los snippets de codigo. ^^
    – lois6b
    Commented el 20 feb. 2018 a las 10:54
-1

Puedes evaluar la posición de un elemento de la siguiente manera (jQuery):

scrollLeft() Sets or returns the horizontal scrollbar position of selected elements

scrollTop() Sets or returns the vertical scrollbar position of selected elements

Por lo que puedes obtener la posición vertical y horizontal. Cuando obtengas el valor que tu consideres puedes aplicar el hover o realizar la acción que deseas.

Saludos

1
  • Hola Armando. Para mejorar la respuesta, pon todo el texto en español. Y pon un ejemplo del codigo resultante con la condicion para que se aplique el hover o no. Para más info mira Cómo responder. Un saludo
    – lois6b
    Commented el 20 feb. 2018 a las 9:53

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.