トグル時にjavascriptとcssで "hidden"に遷移する方法

Question

特定のボタンが押されたときにdivを表示させ、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(); 

これだけでは、デフォルトのアニメーションで要素を非表示にして表示します。 あなたはまた、あなたは使用することができ、このようなfadeToggle（または個別でfadeInとfadeOut）とslideToggle方法として他の方法を持っているhttp://api.jquery.com/toggle/

にして、さらにそれをカスタマイズすることができます。 hideとshow方法を含め ...そのどちらか非表示にしたり、あなたの要素...（.hidden CSSクラスのためのとても必要はありません）を示し