PDA

View Full Version : jQuery fade effects in IE(8)



Rain Lover
11-01-2012, 12:01 PM
Sample 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?


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

(And remove the css style that hides it.)

Rain Lover
11-01-2012, 01:09 PM
what if you try hiding the span with jQuery instead?


$('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
<!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
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:


<!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:


<!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/library/ms531213(v=vs.85).aspx

Rain Lover
11-02-2012, 03:22 PM
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
IE 8 is a strange animal

Funny! LOL!

Beverleyh
11-02-2012, 09:12 PM
John's good like that ;)