javascript - ToggleFade 一个带有显示的元素 :none?

Question

我正在尝试在按下“登录”按钮时切换淡入淡出登录框。在按下“登录”按钮之前，我希望使用 display: none 隐藏该框，以便它无法被看到或与之交互(我不确定不可见是否会阻止其显示)按钮被点击 - 也许指针事件可以改变)。

开关工作得很好，除了第一次按下按钮时隐藏类被删除(显示框)，但随后开关淡出了框。

HTML:

<a id="loginBtn" class="loginBtn" href="/">Login</a>
<div id="loginContainer" class="loginContainer hide">
    <a class="registerBtn" href="/">Register</a>
</div>

CSS:

.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;
}

JS:

$(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

Answer 1

请找到下面提到的解决方案。

$(document).ready(function () {

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

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

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

});

.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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="loginBtn" class="loginBtn" href="/">Login</a>
<div id="loginContainer" class="loginContainer hide">
    <a class="registerBtn" href="/">Register</a>
</div>

如果不起作用请告诉我。