I have a side menu #elemIzq
that is positioned on the left of the screen. I have put a left: -295px
to make it hidden, and thus show all the content with a click, from left to right.
Now I'm working with the function hover
, so that once the mouse is out of the browser, it goes back into hiding.
The problem is that I don't want that to be applied hover
until the element has taken the position left: 0px.
. Could you do it?
Code:
$('#elemIzq').hover(function () {}, function () {
$("#elemIzq").removeClass("desplegado");
});
(The class desplegado
is what makes it have a position left: 0px
).
I would use $.animate() to animate the side so that it can trigger the animation when it's done. To hide the menu you would use the second callback of $.hover()
Example in CodePen
*Edit: I add the .stop(), which makes the animation end the moment you exit the screen.
You can evaluate the position of an element like this (jQuery):
scrollLeft() Sets or returns the horizontal scrollbar position of selected elements
scrollTop() Sets or returns the vertical scrollbar position of selected elements
So you can get the vertical and horizontal position. When you get the value that you consider, you can apply the hover or perform the action you want.
Cheers