Jquery Animate, Opacity and Tooltip

[Steven Gardner]

Hi Guys,

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

Code:

$(“li a”).fadeTo(“slow”, 0.6); //THIS NEEDS TO BE CHANGED SO ITS INSTANT ON PAGE LOAD

$(“li a”).hover(function(){
$(“li a”).fadeTo(“slow”, 1.0); // This sets the opacity to 100% on hover
},function(){
$(“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.

Thanks

Steven

[Steven Gardner]

Ok i have been working out some answers and i think adding some inline styles through Jquery will fix some issues.

Code:

$(“li a”).css(“opacity”,0.2).css(“visibility”, “visible”).css(“margin-top”, “10px”);
$(“li a”).mouseover(function(){
$(“li a”).css(“opacity”, 1).css(“margin-top”, 0).css(“visibility”, “visible”);
});

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

[Steven Gardner]

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.

Code:

$(“li a”).addClass(“nav-start”);
$(“li a”).mouseover(function(){
$(“li a”).addClass(“nav-hover”);
});

EDIT SO FAR

Code:

$(“li a”).addClass(“nav-start”);
$(“li a”).mouseover(function(){
$(“li a”).removeClass(“nav-start”);
$(“li a”).addClass(“nav-hover”);

$(“li a”).mouseout(function(){
$(“li a”).removeClass(“nav-hover”);
$(“li a”).addClass(“nav-start”);
});
});

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.

Thanks

[Author]

Posts