javascript - 淡入不适用于空 DIV

Question

我有一个使用淡入和淡出显示密码的按钮。但是，当密码为空字符串时，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("") 中的空字符串替换为除空格之外的任何值，则淡入将起作用。我通过使用日语全 Angular 空白字符解决了这个问题。但是，我希望在没有明显黑客攻击的情况下使其正常工作。我在这里做的有什么问题或者有什么方法可以让passwordDiv在div文本为空字符串时淡入吗？

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