Question

我尝试在登录时尝试切换淡入淡出的登录信息框＆＃39;按下按钮。直到登录＆＃39;按下按钮我想要使用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>

如果不起作用，请告诉我。

Answer 2

动画不适用于display:none，因为这不是一个过程 - 它是行动。

例如，您可以将元素的height/width更改为0，并在此时制作动画，并在动画结束/用户display:none按钮时在元素上设置keyup。

您还可以为opacity更改设置动画 - 这可能会解决您的问题。

Answer 3

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

http://jsfiddle.net/A6PWN/4/

这是使用不透明度，而不是显示：无;

ToggleFade一个元素，显示：none？

3 个答案: