如何在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类）