Geek Answers Handbook

JQuery fadeIn, fadeOut effects in IE

Below is fadeIn , fadeOut The effect works fine in Firefox 3.0, but it doesn't work in IE 7 ... What is it and what is the trick? Of course, the idea is to get a “blinking” effect and draw the user's attention to a specific row in the 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: A stupid problem was detected ... ".status-error" points to tr-element. This allows you to set the background color and fade it to tr in Firefox, but not in IE. Changing the "CSS pointer" to ".status-error td " pointed to td below tr and everything worked in all browsers.

+4
source share
3 answers

Strange .. couldn't tell you why you are getting this problem, but maybe try the ripple effects plugin? http://docs.jquery.com/UI/Effects/Pulsate

+5
source

I have a similar problem, but I cannot choose td instead for various reasons.

If you are also affected, you can try using show instead of fadeIn. Since I use a similarly broken fadeTo, this doesn't help either :(

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

If you are affected, comment on this ticket.

+1
source

Well, I experimented with various ways to solve this problem. The down and dirty approach that I use is to detect the background and foreground color of the text and just the div/span/etc animation with a color change.

This snippet will “pulsate” the text once (you can create a function that does this more times:

 $.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, ... )} ); }
+1
source

More articles:


All Articles