CODEWITHSUNDEEP
javascriptjquerygoogle-chrome
Gurnard
Gurnard

Reputation: 1775

chrome setTimeout and fade

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.

Upvotes: 0

Views: 980

Answers (6)

Zenexer
Zenexer

Reputation: 19611

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();

Upvotes: 1

Abhidev
Abhidev

Reputation: 7273

you can also try $("#messageCenter").hide(4000)...this will give a shrink animation...but for your case use $("#messageCenter").fadeIn(4000) or $("#messageCenter").fadeOut(4000)

Upvotes: 0

magicalex
magicalex

Reputation: 937

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

Upvotes: 1

Ben
Ben

Reputation: 10298

How about this:

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

Upvotes: 0

Gurnard
Gurnard

Reputation: 1775

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?

Upvotes: 0

auino
auino

Reputation: 1656

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);

Upvotes: 1

Related Questions