ToggleFade顯示一個元素：無？

我試圖按下「登錄」按鈕時淡入一個登錄框。直到按下「登錄」按鈕，我希望該框被隱藏起來，以便它不能被看到或與之交互（我不確定是否沒有可見性會阻止它的按鈕被點擊 - 可能是指針事件可能儘管如此）。ToggleFade顯示一個元素：無？

除了第一次按下隱藏類被刪除（顯示框）的按鈕時，切換工作得非常好，但是切換淡出了該框。

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

來源

2017-07-25 Xander

請找到下面提到的解決方案。

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

讓我知道，如果它不工作。

來源

2017-07-25 10:35:54

Unfortunatley無法正常工作，除了添加防止默認值之外，您是否更改過其他任何內容？ – Xander

請再次檢查我的答案，我已經添加了e.preventDefault並更改了添加類的位置。 'e.preventDefault（）; $（'＃loginContainer'）。fadeToggle（「fast」）; $（'＃loginContainer'）。removeClass（「hide」）;' –

先到iTunes然後刪除類。請檢查我的摘錄。 –

動畫不display:none工作，因爲這不是一個過程 - 它的作用。

例如，您可以將元素的height/width更改爲0，並在此時製作動畫，並在動畫結束時爲元素設置display:none /用戶keyup按鈕。

您還可以動畫opacity更改 - 這可能會解決您的問題。

來源

2017-07-25 10:34:44

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

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

這是通過使用不透明度，不顯示：無;

來源

2017-07-25 10:36:07

ToggleFade顯示一個元素：無？

回答

相關問題