Jquery cross-fade rollover problems in IE7

Question

I built some cross fade rollovers in IE7 using this single image technique: http://jqueryfordesigners.com/image-cross-fade-transition/

It works by placing the rollover image in the background and fading the original image state when the user rollovers the image. IE7 hates it. The rollover state shows up directly below the original image.

You can check it out here: http://hardtopdepot.com/dev/inner.html

It should be pretty obvious in IE7 but the add to cart buttons are suppossed to be Jquery rollovers. I am by no means a JS expert so Im not sure how to go about solving this problem, any suggestions would be very helpful. Thanks-

Answer 1

You could just use simple CSS (example here: http://sophie-g.net/jobs/css/e_buttons.htm) to do the same thing.

Or

Use Scriptaculous (http://script.aculo.us/) if you want to have fancier timed fading. This way you wouldnt have to spend time working on browser compatibility issues.

Answer 2

I guess it's a bug in the plugin. They check for browser names in the plugin, which is always a bad sign (not future-proof).

Anyways, it seems like the buttons you want are just text-buttons with fading background-color. Why can't you just tweak the link to look like a button, and use the jQuery Color Animations plugin?. This solution is better for in page search and screen readers.

I've created a simple demo for you here: http://jsbin.com/egiha4/2

Source: http://jsbin.com/egiha4/2/edit

Needs some styling and a click handler or a href attribute.