CODEWITHSUNDEEP
javascriptjqueryhtml
Mark Hosang
Mark Hosang

Reputation: 501

FadeIn doesn't work with empty DIV

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?

Upvotes: 0

Views: 167

Answers (4)

collab-with-tushar-raj
collab-with-tushar-raj

Reputation: 1287

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

Upvotes: 0

collab-with-tushar-raj
collab-with-tushar-raj

Reputation: 1287

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 !!

Upvotes: 0

sanjeev
sanjeev

Reputation: 4621

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('&nbsp;'); // inserting a blank correct , so that actually the div take some space
        });

Upvotes: 3

Amit Kumar
Amit Kumar

Reputation: 5962

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

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

DEMO

Upvotes: 0

Related Questions