hello people! haven't been here in a while... i left the world of html to work on something else and now i have to remember what a p tag is....EEEK!
So I have a drop down menu and I wanted to use css to transition it in and out nicely when it pops down. i learned that transitions don't work on the display property. It must be block. So instead I used opacity as the transition property and I made it have a position of absolute and moved it way off screen when it is not hovered on. (left: -9999px;)
Now it transitions in nicely because it moves back into place via left:0; and then i use transition: opacity 10s; and the opacity looks good on hover.
But transitioning out does not have the transition because before the opacity has a chance to change back to 0. it moves back to -9999px before you can see the change.
what can I do? i guess i could use jquery and test to see if opacity is 0 and if it is I could move it back to -9999px.....would that work?
no i want it to fade in. so opacity was what wanted to transition. but the absolute positioning moves to the left too fast for you to see the transition. and i can't use visibility instead of moving it to the left because its really still there and if you hover on where it is, it shows.
haven't been here in a while... i left the world of html to work on something else and now i have to remember what a p tag is....EEEK!
So I have a drop down menu and I wanted to use css to transition it in and out nicely when it pops down.
i learned that transitions don't work on the display property. It must be block.
So instead I used opacity as the transition property and I made it have a position of absolute and moved it way off screen when it is not hovered on. (left: -9999px;)
Now it transitions in nicely because it moves back into place via left:0; and then i use transition: opacity 10s; and the opacity looks good on hover.
But transitioning out does not have the transition because before the opacity has a chance to change back to 0. it moves back to -9999px before you can see the change.
what can I do?
i guess i could use jquery and test to see if opacity is 0 and if it is I could move it back to -9999px.....would that work?
no answers?
is it bad if I set the div to visibility:hidden; instead of moving it off screen 9000 pixels? you still won't see it either way...
and i can't use visibility instead of moving it to the left because its really still there and if you hover on where it is, it shows.