CODEWITHSUNDEEP
jquery
codepuppy
codepuppy

Reputation: 1140

Re-displaying after fadeOut

Please can I affirm that I am doing this correctly:

I have a message that I wish to fadeOut after it has been displayed.

The jQuery fadeOut sets display: none once the opacity is zero.

Thus when I want to display that same message again by setting visibility: visible the message won't display because display: none is still set.

So this is what I did:

        $("#message6").fadeOut(600, function(){
            $("#message6").css("display","");
            $("#message6").css("visibility","hidden");              
        });

This works just fine. It doesn't seem very elegant.

Am I missing something here? Is there a neat way of doing this?

Upvotes: 6

Views: 5367

Answers (3)

iappwebdev
iappwebdev

Reputation: 5910

Why don't you do:

$("#message6").fadeOut(600);

And to show your message again:

$("#message6").show();

Upvotes: 12

Priyank Patel
Priyank Patel

Reputation: 7006

Why not something like this

$(document).ready(function() {
        $('#myLabel').fadeOut(1000, function() {
            $(this).html(""); //reset the label after fadeout
        });
    });​

Sample

Upvotes: 2

Jezen Thomas
Jezen Thomas

Reputation: 13800

I've always had strange problems with jQuery's .fadeIn() and .fadeOut() methods, so usually I just animate the opacity. There's nothing wrong with this approach if you're just hiding and showing things.

$('#message6').animate({opacity:0}, 200);

If you don't want any sort of fading animation, you can just use the .hide() and .show() methods, or .css({opacity:0}), or an .animate() method with 0 animation duration.

Upvotes: 0

Related Questions