Javascript 切换淡入显示的元素：无？

当按下“登录”按钮时，我试图切换淡入淡入状态的登录框。在按下“登录”按钮之前，我希望该框隐藏在

display:none

中，这样它就不会被看到或与之交互（我不确定没有可见性是否会阻止其按钮被单击-但指针事件可能会被更改）

除了第一次按下按钮时隐藏类被移除（显示框）外，切换工作得非常好，但随后切换淡出框

HTML:

JS:

---

动画不适用于

display:none

，因为这不是一个过程，而是一个动作

例如，您可以将元素的

高度/宽度

更改为0，并在此时制作动画，当动画为最终/用户

键控按钮时，在元素上设置
显示：无

您还可以设置
不透明度的动画
更改-这可能会解决您的问题。
请找到下面提到的解决方案


$（文档）.ready（函数（）{
var loginBtn=document.getElementById（“loginBtn”）；
//在汉堡上显示移动导航单击
函数显示登录（e）{
e、 预防默认值（）；
$（'loginContainer'）。fadeToggle（“快速”）；
$（“#loginContainer”）.removeClass（“隐藏”）；
}
//事件侦听器
loginBtn.addEventListener（“单击”，显示登录）；
});
.loginBtn{
颜色：#1493d1；
背景：#fff；
边界半径：98px；
光标：指针；
利润率：15px0；
填充：8px 15px；
位置：绝对位置；
右：0px；
/*浮动：对*/
文字装饰：无；
}
.loginContainer{
宽度：175px；
高度：250px；
背景：#fff；
边界半径：10px；
位置：绝对位置；
顶部：80px；
右：0px；
/*浮动：对*/
}
.隐藏{
显示：无！重要；
}



这是使用不透明度，而不是显示：无
 不幸的是，这不起作用，除了添加prevent默认值之外，您还更改了什么吗？请再次检查我的答案，我已经添加了e.preventDefault并更改了下面添加类的位置<代码>e.preventDefault（）$（“#loginContainer”）.fadeToggle（“快速”）$（“#loginContainer”）.removeClass（“隐藏”）首先打开，然后删除类。请检查我的代码片段。是的，这就是我错过的，切换/删除类的顺序。非常感谢@伊森·布里斯托：很高兴帮助你。
<a id="loginBtn" class="loginBtn" href="/">Login</a>
<div id="loginContainer" class="loginContainer hide">
    <a class="registerBtn" href="/">Register</a>
</div>

.loginBtn {
    color: #1493d1;
    background: #fff;
    border-radius: 98px;
    cursor: pointer;
    margin: 15px 0 0 0;
    padding: 8px 15px;
    position: absolute;
    right: 0px;
    /*float: right;*/
    text-decoration: none;
}

.loginContainer {
    width: 175px;
    height: 250px;
    background: #fff;
    border-radius: 10px;
    position: absolute;
    top: 80px;
    right: 0px;
    /*float: right;*/
}

.hide {
    display: none !important;
}

$(document).ready(function () {

    var loginBtn = document.getElementById("loginBtn");

    //DISPLAY MOBILE NAVIGATION ON HAMBURGER CLICK
    function displayLogin() {
        $('#loginContainer').removeClass("hide");
        $('#loginContainer').fadeToggle("fast");
    }

    //EVENT LISTENERS
    loginBtn.addEventListener("click", displayLogin);

}); //Doc Ready

$('h2').click(function() {
    var boxOpacity = parseInt($('.box').css('opacity'));
    $('.box').animate({
        opacity: boxOpacity == 0 ? 1 : 0
    });
});