Forums

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

$(\"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.

$(\"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.

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

EDIT SO FAR

$(\"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

ikthius

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

treehouse : what would you like to learn today?

Forums

Jquery Animate, Opacity and Tooltip