Geek Answers Handbook

Opacity animation ruined my text

I am trying to create the following effect: when I hover on my link, this link changes color, this part works, but the problem with my code is that I can not see my text when I am. I know that I can solve this problem by adding images to my span and anchor tag, and I also know that there is a plugin that animates color, but IF POSSIBLE I would like to enable this WITHOUT background images and plugins. Is it possible?
I created this FIDDLE so you can see my problem.

My code is:

$(document).ready(function () { $('.link').hover(function () { var heightCheck = $(this).outerHeight(); //alert(heightCheck); $(this).stop().animate({ opacity: 0 }, 1000); $('.yellow').height(heightCheck); $('.yellow').css({ 'margin-top': -heightCheck }); }, function (heightCheck) { $(this).stop().animate({ opacity: 1 }, 1000, function () { $('.yellow').css({ 'margin-top': +heightCheck }); }); }); });
+4
source share
4 answers

Well, you are already using jQuery, why not use the jQuery UI (the plugin that you reference) and do everything with a single element.

Think about it, do you remember to include this extra .yellow range every time you want to use such a link?

Also, why not use progressive enhancement and do it all with CSS? Can you even backup jQuery for IE?

See my attached violin.

http://jsfiddle.net/nzcGy/3/

+3
source

If I understand what you're trying to achieve here, it looks like it will be resolved with a single line of CSS. eg...

 .link:hover { background-color: yellow;}

The reason you don't see your text is opacity: 0 makes it invisible.

+1
source

Change it so that the gray background color is applied to the li style, and not to the link itself. Clear the opacity animation line for .link.

Maybe something like this? http://jsfiddle.net/5bXHW/

+1
source

I played with opacity to get this result, now it looks much better http://jsfiddle.net/kyWth/37/ . Link transparency and spacing opacity are set to 0.5 now. Does this look like what you want?

UPDATE Made changes to your code here http://jsfiddle.net/kyWth/39/ , works great, you don't need a range either.

+1
source

More articles:


All Articles