jQuery Fun with Animation and Opacity

Over the last few days, I’ve been doing some more work with jQuery.  It’s really a very cool abstraction on JavaScript, but it does take some getting used to.  My latest challenge is to understand .animate.  It’s pretty straightforward, but cross-browser issues can make it tricky.  I’m having “special” trouble with opacity in Internet Explorer.  It’s probably not a surprise that IE thinks about opacity differently than the other big browsers (Firefox, Safari).

The CSS for opacity in most browsers looks like this:

#MyID {
  opacity= .4;
}

The values for opacity can be 0 (transparent) to 1 (opaque).

In Internet Explorer, opacity is set like this:

#MyID {
  filter: alpha(opacity=40); /* IE5-7 */
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; /* IE8 */
}

The values for opacity in this case can be 0 (transparent) to 100 (opaque).

What I’m trying to do is to get a tag line to animate by fading in and sliding to the right at the same time on a banner background.  Well, why not just use Flash or Silverlight, you might ask?  The answer is partly that I want to learn how to do this and partly because I think it will be great to let users set the text anytime they want in a Content Editor Web Part (CEWP) in SharePoint and have the banner text just change immediately.  (I know there are ways to do this with Flash and Silverlight as well.)

I’m stuck on the opacity in IE.  Take a look at the SophiaThink Consulting home page (live but not “launched” yet) and let me know if you have a fix.  It’s working great in Safari and Firefox, but looks pretty bad in IE.  I’ll post the solution when I find it.

UPDATE 2009-07-24 14:50 – Found this blog post that gave me some insight on IEs quirks with opacity.  Turns out the filters aren’t the same in IE8 (which I am using) and IE5-7!  Yeah, like that was obvious.

UPDATE 2009-07-24 15:35 – Everything’s working well, except the text is grainy after the animation.  From what I’ve read, jQuery ought to handle this in IE by removing the alpha filters when the opacity is 1 (100).  I’m trying to do this myself, but still no joy.  Here’s the jQuery at this point:

$("#BannerText").css({
    width: "100%",
    opacity: "0.0",
    marginLeft: "20px",
    fontSize: "26px"
   }).animate({
    width: "100%",
    opacity: "1.0",
    marginLeft: "100px",
    fontSize: "26px"
   }, 5000 ).removeClass("filter -ms-filter");

UPDATE 2009-07-27 – If you can’t make it work, find a compromise that will. I’ve decided to back off on the fade in in IE. There just doesn’t seem to be a way to make the opacity animation work without ending up with grainy text.

Here’s the CSS and jQuery I’ve ended up with.  It looks staggeringly simple given the amount of time I’ve fiddled with it!

.BannerLarge div span {
 width:70%;
 opacity: 0; /* Firefox and Safari */
 padding-top:55px;
 margin-left:20px;
 float:left;
 font-family:"Franklin Gothic Book", Helvetica, sans-serif;
 font-size:26px;
 color:#ffffff;
}

if(jQuery.support.opacity) {
    $("#BannerText").animate({
     opacity: "1.0",
     marginLeft: "100px"
    }, 5000 );
   } else {
    $("#BannerText").animate({
     marginLeft: "100px"
    }, 5000 );

UPDATE 2009-08-02 – I think that the issue in the above situation is actually caused by the background image format. (I haven’t yet been able to find out exactly how the graphic designer created the image.) Because I liked the effect, I tried something similar on the Sympraxis Consulting site. It seems to work fine in IE, too. I created the simple background image using Gimp and deployed it as a JPG.