CODEWITHSUNDEEP
jquerycross-browser
Riri
Riri

Reputation: 11977

jQuery fadeIn, fadeOut effects in IE

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.

Upvotes: 4

Views: 14317

Answers (3)

Iggi
Iggi

Reputation: 11

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,
       ...
      )}
    );
}

Upvotes: 1

Christopher Edwards
Christopher Edwards

Reputation: 6659

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.

Upvotes: 1

lucas
lucas

Reputation: 6981

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

Upvotes: 5

Related Questions