jquery highlight effect with hide mode not working on IE

Question

Hi

I have a div to show a message, I want the message to appear for a few seconds and then just fade until it disappears.

I just define a normal div and hide it when the page loads with $('#mydiv').hide();

I have a button to show the div with the desired effect, for this, I'm using:

  $('#myDiv').fadeIn('fast').effect("highlight", { color: "green", mode:"hide" }, 5000);

This works perfectly on Firefox and Chrome, but on IE (tried it on 6, 7 and 8) it works only the first time, after that it won't show the message.

If there's no way to achieve this in IE, I would like to know how can I do a fadeOut or something like that AFTER the highlight has ended.

Thanks for your help

Answer 1

Generally speaking I don't chain effects. You probably want to use a callback instead:

$('#myDiv').fadeIn('fast', function() {
  $(this).effect("highlight", { color: "green", mode:"hide" }, 5000);
});

Answer 2

It looks like this jQuery ticket is related to your problem.

The workaround I found is to add

$('#myDiv').removeAttr('style');

before

$('#myDiv').fadeIn('fast').effect("highlight", { color: "green", mode:"hide" }, 5000);

to clear the IE filter issue.