Forums

soap

Hello there,

View the example here

They are the six boxes near the bottom of the page.

$('#service_box div a span').hover(function() {
		$(this).stop().animate({
			opacity: 1,
			filter: 'alpha(opacity=100)'
		}, 300);
	}, function() {
		$(this).stop().animate({
			opacity: 0,
			filter: 'alpha(opacity=0)'
		}, 300);
	});

If you view it in Firefox or Chrome, they are exactly how I want them to be.

The problem is, if you open it with IE, the black thing with the "Learn More" button aren't actually fading, just kind of appearing and disappearing. It's hard to explain so if you can open it up it will be apparent to you.

I don't know why this is, anybody know a fix?

Thanks

soap

Bump, still unresolved.

jamy_za

Remove filter: 'alpha(opacity=0)'

$('#service_box div a span').hover(function() {
                $(this).stop().animate({
                        opacity: 1,
                }, 300);
        }, function() {
                $(this).stop().animate({
                        opacity: 0
                }, 300);
        });

treehouse : what would you like to learn today?

Forums

jquery animate() opacity acting strange in IE.