jQuery fade effects in IE(8)

**Rain Lover** · 11-01-2012, 12:01 PM

Sample code:

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
span {display:none;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("span").fadeIn(3000);
  });
});
</script>
</head>
<body>
<button>Fade in</button>
<span>This is some text.</span>
</body>
</html>

It doesn't work in IE8 and probably older versions. Any solution?

**Beverleyh** · 11-01-2012, 12:48 PM

what if you try hiding the span with jQuery instead?

Code:

$('span').css({'display':'none'});

(And remove the css style that hides it.)

**Rain Lover** · 11-01-2012, 01:09 PM

Originally Posted by Beverleyh

what if you try hiding the span with jQuery instead?

Code:

$('span').css({'display':'none'});

(And remove the css style that hides it.)

I'm afraid it doesn't help.

**bernie1227** · 11-02-2012, 02:47 AM

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
span {display:none;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("span").fadeIn(3000);
  });
});
</script>
</head>
<body>
<button>Fade in</button>
<span>This is some text.</span>
</body>
</html>

Try updating it to the latest version of jquery.

**Rain Lover** · 11-02-2012, 02:59 AM

Originally Posted by bernie1227

Try updating it to the latest version of jquery.

I tried it to no avail.

**jscheuer1** · 11-02-2012, 04:21 AM

It needs to be laid out differently for IE 8 and less. Here's one way:

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
span {display: inline-block;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("span").fadeIn(3000);
  });
});
</script>
</head>
<body>
<button>Fade in</button>
<span style="display: none;">This is some text.</span>
</body>
</html>

Here's another:

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
button, span {display: block; float: left; margin-right: 0.5em;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("span").fadeIn(3000);
  });
});
</script>
</head>
<body>
<button>Fade in</button>
<span style="display: none;">This is some text.</span>
</body>
</html>

There may be other ways. Essentially though I believe it needs to be display block (will probably work in IE 6+, jQuery doesn't support IE less than 6) or inline-block (may break down in IE 7 or 6 due to those browsers not rendering it inline). In ordinary javascript when applying filters (fade is accomplished in IE 8 and less via a proprietary IE filter) to an element, we are told that the element "must have layout". The zoom property is often used for that. I tried it here though and it did not work.

For more on what MS says constitutes 'layout', see:

http://msdn.microsoft.com/en-us/libr...(v=vs.85).aspx

**Rain Lover** · 11-02-2012, 03:22 PM

Originally Posted by jscheuer1

There may be other ways. Essentially though I believe it needs to be display block (will probably work in IE 6+, jQuery doesn't support IE less than 6) or inline-block (may break down in IE 7 or 6 due to those browsers not rendering it inline). In ordinary javascript when applying filters (fade is accomplished in IE 8 and less via a proprietary IE filter) to an element, we are told that the element "must have layout". The zoom property is often used for that. I tried it here though and it did not work.

Informative and helpful as always! Thanks a lot!

**jscheuer1** · 11-02-2012, 05:26 PM

I reread the spec and it does say that zoom is good enough. jQuery itself applies zoom in IE when fading for this very reason. However, as we can plainly see that's not always enough for IE 8 (it would be if the item were display: block;). It is for IE 7 and 6 I believe. IE 8 is a strange animal, not fully compliant with MS's own junk, and not yet compliant enough with standards to make up for it. IE 9 in standards mode doesn't need zoom as it uses standards compliant opacity, rather than a filter.

Interestingly, what MS calls layout is almost the opposite of the term. It's anything that takes the element out of the flow or layout of the page. But even that's inconsistent because for them it also includes width and height, which are often in the layout of the page. But again, not all of those things always work, especially with IE 8.

**Rain Lover** · 11-02-2012, 07:22 PM

Originally Posted by jscheuer1

IE 8 is a strange animal

Funny! LOL!

**Beverleyh** · 11-02-2012, 09:12 PM

John's good like that

Thread: jQuery fade effects in IE(8)

Thread Tools

Search Thread

jQuery fade effects in IE(8)

The Following User Says Thank You to jscheuer1 For This Useful Post:

Similar Threads

Resolved Javascript fade in&out (without jquery)

Jquery effects don't activate until after I mouse over once

Jquery fade in out

jQuery Effects Bounce Issue. - Wont Stop Bouncing!

Advanced RSS Ticker fade effects my navigation menu

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions