如何在javascript和css中切換到「隱藏」時切換

Question

我試圖讓一個div出現在某個按鈕被按下並讓它在類.hidden（它隱藏了div）之間切換。我試圖通過添加一個轉換來爲此設置動畫，但由於某種原因，它被隱藏的事實打亂了它。總之，我想知道是否有辦法讓隱藏狀態和可見狀態之間的轉換動畫化。

var main = function() { 
 

 
    $("#myMenu").css("height", window.innerHeight); 
 
    $("#myMenu").css("width", window.innerWidth); 
 

 
} 
 

 

 
$(document).ready(main);

.toggle { 
 
    font-size: 20px; 
 
    margin: 20px; 
 
    margin-top: 30px; 
 
    display: block; 
 
    position: fixed; 
 
    top: 0; 
 
    right: 0; 
 
    z-index: 100; 
 
} 
 
.hidden { 
 
    visibility: none; 
 
    display: none; 
 
} 
 
.menu { 
 
    background-color: red; 
 
    position: fixed; 
 
    top: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<!--contains hamburger--> 
 
<div class="toggle"> 
 
    <a id="tButton" href="javascript:void(0);" onclick="toggleNav()">&#9776;</a> 
 
</div> 
 

 
<!--actual mobile menu--> 
 
<div id="myMenu" class="menu hidden"> 
 
    <ul> 
 
    <li><a onclick="toggleNav()">Home</a> 
 
    </li> 
 
    <li><a onclick="toggleNav()">Events</a> 
 
    </li> 
 
    <li><a onclick="toggleNav()">About</a> 
 
    </li> 
 
    <li><a onclick="toggleNav()">Volunteer</a> 
 
    </li> 
 
    <li><a onclick="toggleNav()">Contact</a> 
 
    </li> 
 

 
    </ul> 
 

 
</div> 
 

 
<script> 
 
    function toggleNav() { 
 
    $("#myMenu").toggleClass("hidden"); 
 
    if ($("#myMenu").hasClass("hidden")) { 
 
     $("#tButton").text(String.fromCharCode(9776)); 
 

 
    } else { 
 
     $("#tButton").text(String.fromCharCode(10005)); 
 
    } 
 
    } 
 
</script>

Answer 1

嘗試了這一點。

if ($("#myMenu").hasClass("hidden")) { 
     $("#tButton").text(String.fromCharCode(9776)); 

     $("#myMenu").fadeIn() 
     $("#myMenu").removeClass('hidden'); 
    } else { 
     $("#myMenu").addClass('hidden'); 
     $("#myMenu").fadeOut(); 
     $("#tButton").text(String.fromCharCode(10005)); 
    } 

全部演示

var main = function() { 
 

 
    $("#myMenu").css("height", window.innerHeight); 
 
    $("#myMenu").css("width", window.innerWidth); 
 

 
} 
 

 

 
$(document).ready(main);

.toggle { 
 
    font-size: 20px; 
 
    margin: 20px; 
 
    margin-top: 30px; 
 
    display: block; 
 
    position: fixed; 
 
    top: 0; 
 
    right: 0; 
 
    z-index: 100; 
 
} 
 
.hidden { 
 
    visibility: none; 
 
    display: none; 
 
} 
 
.menu { 
 
    background-color: red; 
 
    position: fixed; 
 
    top: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<!--contains hamburger--> 
 
<div class="toggle"> 
 
    <a id="tButton" href="javascript:void(0);" onclick="toggleNav()">&#9776;</a> 
 
</div> 
 

 
<!--actual mobile menu--> 
 
<div id="myMenu" class="menu hidden"> 
 
    <ul> 
 
    <li><a onclick="toggleNav()">Home</a> 
 
    </li> 
 
    <li><a onclick="toggleNav()">Events</a> 
 
    </li> 
 
    <li><a onclick="toggleNav()">About</a> 
 
    </li> 
 
    <li><a onclick="toggleNav()">Volunteer</a> 
 
    </li> 
 
    <li><a onclick="toggleNav()">Contact</a> 
 
    </li> 
 

 
    </ul> 
 

 
</div> 
 

 
<script> 
 
    function toggleNav() { 
 
    
 
    if ($("#myMenu").hasClass("hidden")) { 
 
     $("#tButton").text(String.fromCharCode(9776)); 
 
     
 
     $("#myMenu").fadeIn(); 
 
     $("#myMenu").removeClass('hidden'); 
 
    } else { 
 
     $("#myMenu").addClass('hidden'); 
 
     $("#myMenu").fadeOut(); 
 
     $("#tButton").text(String.fromCharCode(10005)); 
 
    } 
 
    } 
 
</script>

Answer 2

既然你已經使用jQuery，可以讓圖書館做繁重你。

fadeIn()，fadeOut()和fadeToggle()將幫助您：

$('#my-div').hide(); 
 

 
function show() { 
 
    $('#my-div').fadeToggle(); 
 
}

#my-div { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button onclick='show()'>Toggle</button> 
 
<div id='my-div'></div>

Answer 3

你使用jQuery但出於某種原因，你正在做手工。 你有多個jQuery函數爲你做。

$("#myMenu").toggle(); 

僅此一項就會隱藏並顯示具有默認動畫的元素。 您可以在http://api.jquery.com/toggle/

您還有其他方法，如fadeToggle（或單獨與fadeIn和fadeOut）和slideToggle方法，你可以使用進一步對其進行自定義。 包括hide和show方法..要麼隱藏或顯示元素......（所以不需要一個.hidden CSS類）