Been trying to create an effect i have for my Navigation icons using Jquery.
I have added an attachment for a better idea of what i want to achieve.
I want an icon to be displayed 70% opacity on page load.
When i hover over the icon i want it to fadeTo to 100% while moving up about 25px and displaying a tooltip.
This is what i have so far
$(“li a”).fadeTo(“slow”, 1.0); // This sets the opacity to 100% on hover
$(“li a”).fadeTo(“slow”, 0.6); // This sets the opacity back to 60% on mouseout
I hope this is clear enough for you to reply.
Ok i have been working out some answers and i think adding some inline styles through Jquery will fix some issues.
This will set opacity on load. Then on hover the image will change opacity and move up 10px.
How do i get the original state when i hover away?
How do i make the transitions smooth
EVEN BETTER STILL
i will use AddClass instead of multiple .css
Ok i have added an .addClass function when mouseover but how do i get back to the original state when i move my cursor away from the effected area.
EDIT SO FAR
I have most of the effect sorted out i just need a more smoother transition now and a tooltip to appear.
All ideas and suggestions to my my code so far better- welcome.
sorry no one has ehlped you, normally soeone would have helped, glad your getting it on your own & sharing…… I would help, but I know nothing of jQuery
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".