Comments on: Image Fade Revisited

By: Mike

Mike — Sun, 24 Jan 2010 02:37:57 +0000

Hey guys,

Below is my version of the code. I have tested this and the fading effect displays EXACTLY the same in IE6, IE8, FF3.5 (win + linux), Chrome 3 (win + linux), Konqueror (linux) and Opera (linux). It degrades nicely when javascript is turned off (simple css rollover) and contains the link text when the style sheet is disabled. Can anyone spot anything wrong with this version? (as I am new to css, javascript and jquery – it seems to work a little too well).

[Author edit: moved to JS Bin]: http://jsbin.com/iroxu3/edit#html

By: Dimbeko

Dimbeko — Mon, 04 Jan 2010 23:24:08 +0000

Another great script!

I have been using it for my website main menu: http://www.dabproject.com/ No issues, no errors, extremely easy to implement and modify. It shows a real power of JQuery!

The script can be used anywhere, not only for menu elements. I have an idea to use it like roll-over for my portfolio demonstration but have not implemented yet.

Thank you!

By: Quinn

Quinn — Sun, 27 Dec 2009 20:49:41 +0000

Hello – i’m having problems with this on Internet Explorer. The leftmost “button” on both instances of the nav running on my site seem to float on top of the other ones… only in IE! If anyone can look at the code and help I would be grateful! — http://quinnianniciello.com Thanks!

By: scherii

scherii — Wed, 21 Oct 2009 07:30:52 +0000

First I'd like to thank you for this great website.

Do you know how to fade transparent pngs in IE (without that annoying black border)? I've tried it with unitpngfix - but that does not seem to work..

EDIT: sry, it seems that unitpngfix doesn't work with background-position e.g. css sprites.

By: Ben

Ben — Sat, 17 Oct 2009 06:22:15 +0000

Thanks for the code, still useful today! I’ve employed this code for a site I’m working on for my friend who is using a vertical scroller with images as a navigation for his portfolio. What I am trying to do now is activate the hover image of the specific image when it is clicked on, so it appears in full opacity compared to the others. I didn’t quite understand what Lane did. I’ve created a new class with the same properties as the hover and added it through some pathname/indexOf logic to the link, but with no success. Any help would be appreciated. http://www.randyberinger.com/kiwi. Thanks!

By: Vale

Vale — Wed, 30 Sep 2009 19:47:28 +0000

If you disable javascript on the demo page, is not going to fallback to the css original version of the navbar (background position swapping on mouse hover).

By: vale

vale — Sun, 27 Sep 2009 13:18:48 +0000

Hey thanks for explaining this, great tutorial. I’m not understanding how to let this fallback fine when javascript is disabled (or the user is using IE6) keeping the background shift on link’s hover state. Thanks.

By: Al

Al — Wed, 23 Sep 2009 19:15:46 +0000

hi, i ‘ve just used that navigation thing, but it seems doesn’t work well ’cause i put other image instead dragon-sprite.jpg and i added the transitions on the image just like the original, but it doesn’t do anything, if anyone could help me i’d apreciate it tnx :)

By: Lane

Lane — Mon, 07 Sep 2009 01:15:05 +0000

Nevermind. I figured it out. Just added this to the js:

$('#nav li a').filter(function () { return !$(this).hasClass("active"); }) .append('').each(function() {

and this to the CSS

ul .hi a#home:hover, ul a#home span.hover ul a#home.active {

width: 49px; background-position: -158px -30px;

}

By: Lane

Lane — Mon, 07 Sep 2009 00:42:10 +0000

Hi Rem! As usual, great tut. One question, how would you keep a link faded in when it is active? (ie. Keep Portfolio lit up when you are on the portfolio page?)