chrome setTimeout and fade

Question

I am trying to do a delayed fade out of a div. I am using JQuery but none of the delay methods work in Chrome 16, all is fine in FF 10.

msgCenter.style.display = "inline";
setTimeout('$("#messageCenter").hide("fade", { }, 1000);',4000);
$('#messageCenter').delay(4000).fadeOut();

Neither of these work in Chrome.

This will work in Chrome but has no fade effect:

setTimeout('$("#messageCenter").hide();',4000);

Can anyone tell me why? Also is there a way I can add a fading effect to Chrome? Thanks for reading.

Answer 1

Yet another solution:

setTimeout(function() {
    $("#messageCenter").css('display', 'block').fadeOut();
}, 4000);

And if fadeIn is encountering issues, too:

$("#messageCenter").css({display: 'block', opacity: 0}).fadeIn();

Answer 2

You have to use a JQuery animation, like one of the following:

setTimeout('$("#messageCenter").fadeOut();', 4000);
setTimeout('$("#messageCenter").animate({ opacity: 0.0 }, 1000, function() { /* Animation complete */});', 4000);

Answer 3

Your second option should work. I set up a jsfiddle here which works on Chrome 16.0.912.77.

Answer 4

If I set it to

msgCenter.style.display = "block";

it works for all the options mentioned above! Seems strange to me. Anyone know why it must be block and not inline?

Answer 5

How about this:

setTimeout(function() {
    $('#messageCenter').css("display","block").fadeOut(4000,function() {
        $(this).css("display","inline");    
    });
});

Answer 6

您还可以try $("#messageCenter").hide(4000) ...这将产生收缩动画...但是对于您而言，请使用$("#messageCenter").fadeIn(4000)或$("#messageCenter").fadeOut(4000)