Question

我有使用fadein和fadeout显示密码的按钮。但是，当密码为空字符串时，div不会淡入。

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

这是一个JSfiddle link来玩。

如果我用除空格之外的任何值替换passwordDiv.text（“”）中的空字符串，则淡入将起作用。我通过使用日语全角空白字符解决了这个问题。但是，我希望这项工作没有明显的黑客攻击。有没有什么不对的我在这里或者有办法得到它所以当div文本是一个空字符串时，passwordDiv会淡入？

Answer 1

它正在运作

事实上，你无法看到它。由于<div>不包含任何内容，因此HTML中不占用空间。

您可以看到您的网络控制台，您会发现div的不透明度会发生变化

只需尝试添加以下高度和宽度，您就可以看到更改

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

其他方法不是清空<div>，只是在div中插入一个空白正确，以便<div>取一些

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

Answer 2

你的div是空的，所以你可以设置边框或其他东西来看效果。

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

DEMO

Answer 3

这是我为你创建的jsfiddle http://jsfiddle.net/Tushar490/LkxLzhmt/9/

您需要为具有＆＃34;密码＆＃34;的div添加尺寸（宽度，高度）。如果你想看到空字符串的淡化效果，你也需要设置尺寸。会发生什么事情，当你给该div文本时，div取宽度：auto和height：auto。但是当你不给该div提供任何文本时，宽度：auto和height：auto将显示任何内容和那个＆＃39;纯粹是合乎逻辑的。

只是一个你想要的CSS，没有别的： -

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

希望我的回答能帮到你!!

Answer 4

您也可以这样做以显示空字符串淡入淡出效果： -

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

FadeIn不适用于空DIV

4 个答案: