jQuery fadeIn, fadeOut effects in IE

Question

The below fadeIn, fadeOut effect works fine in Firefox 3.0 but it doesn't work in IE 7 ... Whay is that and what's the trick? The idea is of course to get a "blink" effect and attract the attention of the user to a specific row in a table.

function highLightErrorsAndWarnings() {
            $(".status-error").fadeIn(100).fadeOut(300).fadeIn(300).fadeOut(300).fadeIn(300).fadeOut(300).fadeIn(300);
            $(".status-warning").fadeIn(100).fadeOut(300).fadeIn(300).fadeOut(300).fadeIn(300).fadeOut(300).fadeIn(300);
        }

Update: Found the stupid problem ... ".status-error" points to a tr-element. It's possible to the set the background-color and fade it on a tr in Firefox but not in IE. Changing the "CSS pointer" to ".status-error td" made it point to the td below the tr and everything worked in all browsers.

Answer 1

Weird.. couldn't tell you why you're getting that problem, but maybe try the pulsate effect plugin? http://docs.jquery.com/UI/Effects/Pulsate

Answer 2

I have a similar issue but I can't select the td's instead for various reasons.

If you are also affected you might try using show instead of fadeIn. Since I'm using the similarly broken fadeTo this doesn't help me either :(

There is a jQuery bug open here - http://dev.jquery.com/ticket/5451

If you are affected please comment on the ticket.

Answer 3

Well, i have experimented with various ways to address this issue. The down and dirty approach that I use is to detect background and foreground color on text and just animate the div/span/etc with color change.

This snippet will "pulsate" the text once (you can create a function that does it more times by :

$.fn.crossBrowserPulsate = function() {
    var startColor = $(this).css("background-color");
    var endColor = $(this).css("color");

    $(this).animate({color:startColor},500,
     function() {
      $(this).animate({color:endColor},500,
       ...
      )}
    );
}