IE8 will not perform Fade animation properly

classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|

IE8 will not perform Fade animation properly

Jared A. D. Radtke

Hello All,

I am new to this forum as well as web design (started a few months
ago).  I have been trying to implement fade effects on my site which
are not working in IE8 (naturally works fine in everything else). When
it runs, the text (set within a span that has an ID) simply disappears
rather than fade out.  I assume this is common and that there is a way
around it... does anyone care to share?

Thanks,
Jared
Reply | Threaded
Open this post in threaded view
|

Re: IE8 will not perform Fade animation properly

EnvyGeeks

How exactly are you trying to fade it? A sample of your code would be good
to diagnose said error, otherwise we have to assume that you are relying on
JQuery to fade and if you are then assume that it's the way you have your
span setup with CSS.

-----Original Message-----
From: [hidden email] [mailto:[hidden email]] On
Behalf Of Jared A. D. Radtke
Sent: Saturday, April 11, 2009 2:34 PM
To: jQuery (English)
Subject: [jQuery] IE8 will not perform Fade animation properly


Hello All,

I am new to this forum as well as web design (started a few months
ago).  I have been trying to implement fade effects on my site which
are not working in IE8 (naturally works fine in everything else). When
it runs, the text (set within a span that has an ID) simply disappears
rather than fade out.  I assume this is common and that there is a way
around it... does anyone care to share?

Thanks,
Jared

Reply | Threaded
Open this post in threaded view
|

Re: IE8 will not perform Fade animation properly

Jared A. D. Radtke

Here is the HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="javascript/jquery_1-3-2.js"></
script>
<script type="text/javascript" src="testJava.js"></script>
</head>

<body>

<br />
<br />
<span id="FadeThisGuy">This Fades on loadup</span>

</body>
</html>

And here is the JavaScript:

$(document).ready(function(){
  $("#InputField").focus();
  $("#FadeThisGuy").fadeOut("slow");
});


It's an incredibly simple test which works fine it Firefox, yet in IE
it performs a "cut" rather than a fade where after the set duration of
the effect, the object just disappears.  I thought I recall reading
somewhere than you had to apply a certain attribute to HTML/CSS in
order to activate alpha/opacity in IE but I don't have any concept of
how.

Thanks again.
THD
Reply | Threaded
Open this post in threaded view
|

Re: IE8 will not perform Fade animation properly

THD
I had this same problem in IE8 and solved it by changing the CSS.

In my situation I tried to fade an absolutely positioned div with another positioned div inside (both relative and absolute). The outer div background would fade, but the elements inside the inner div wouldn't.
Only by removing the position from the inner div the fade would work correctly.
I just positioned the inner div with a margin and after that the fade runs smoothly instead of with a cut.

Since you don't have any CSS defined I don't know what the problem is here, but try to add some CSS because IE8 seems picky with the positioning (I would try display:block and position:relative).

Regards,
THD
Reply | Threaded
Open this post in threaded view
|

Re: IE8 will not perform Fade animation properly

Amaca

THD wrote
In my situation I tried to fade an absolutely positioned div with another positioned div inside (both relative and absolute). The outer div background would fade, but the elements inside the inner div wouldn't.
Only by removing the position from the inner div the fade would work correctly.
I just positioned the inner div with a margin and after that the fade runs smoothly instead of with a cut.


Regards,
THD
you was right, i had set a big container with absolute position with inside other absolute div. The fade was set to the big outside container, and the effect worked in IE7, IE6 (!!!) but not in IE8.

Now i have changed the inside div position to relative, and all works in all browser!

Thank you so much, you save me!! :)