FadeIn doesn't work with empty DIV

Question

I have button that shows a password by using fadein and fadeout. However, when the password is an empty string, the div doesn't fade-in.

Html

<div>    
    <div>********</div>
    <div class="password"></div>
    <input type="button" class="showPasswordButton" value="Show Password">
</div>

Jquery

   $(".showPasswordButton", false).on("click", function () {   
    var passwordDiv = $(".password");
    passwordDiv.text("");
    passwordDiv.fadeIn(500).delay(3000).fadeOut(500, function () {
        passwordDiv.empty();
    });
});

Here is a JSfiddle link to play around with.

If I replace the empty string in passwordDiv.text("") with any value except whitespace, the fade-in will work. I've gotten around the issue by using a Japanese full-width whitespace character. However, I'd like to get this working without an obvious hack. Is there something wrong I'm doing here or a way to get it so passwordDiv will fade-in when the div text is an empty string?

Answer 1

It's working

the matter of fact is that you can't see it. Since by <div> contain nothing, hence it does not take space in the HTML.

You can see your web console and you will find that opacity of the div get changed

JUST try adding the below height and width and you can see the change

.password {
    height: 500px;
    width: 500px;
    background-color: #ff0000;  // background of the div, so that you can see the change
}

Other way is not to empty the <div> , just have a blank correct inserted in to the div , so that the <div> take some

        passwordDiv.fadeIn(500).delay(3000).fadeOut(500, function () {
           passwordDiv.html(' '); // inserting a blank correct , so that actually the div take some space
        });

Answer 2

your div is empty , so you can set border or something to see effect .

.password{
width:50px;
    height:50px;
    border:solid 2px red;
}

DEMO

Answer 3

Here is the jsfiddle i have create for you http://jsfiddle.net/Tushar490/LkxLzhmt/9/

you need to add dimensions(width,height) for the div having "password" class .As you want to see that fading effect for the empty string too , you need set the dimensions as well. What happen is when you give text to that div , the div takes width:auto and height:auto .But when you don't give any text to that div then width:auto and height:auto will show you nothing and that's purely logical .

just a CSS you want , and nothing else :-

.password{
display:none;
width:100px;
height:15px;
}

Hope my answer help you !!

Answer 4

You can also do this for showing empty string fade in-fade out effect :-

$(".showPasswordButton", false).on("click", function () {   
var passwordDiv = $(".password");
passwordDiv.html("<br>");
passwordDiv.fadeIn(500).delay(3000).fadeOut(500, function () {
    passwordDiv.empty();
});
});