1
Ich habe eine Menü-Sektion, die zunächst versteckt ist, aber sobald Hamburger/Taste klickt, wird es von seiner ursprünglichen Position von 70px zu 90px mit .animate Funktion von jquery animieren, ja es funktioniert, um auf Anhieb zu schalten, aber wenn ich das Menü durch Klicken auf die Schaltfläche ausblenden, dann versuchen Sie es erneut zu zeigen, klicken Sie auf die Schaltfläche, dann .animate Funktion nicht starten..animieren nicht auf .Toggle klicken Ereignis
Hier ist die DEMO
-Code
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<button class="menu-ham hamburger hamburger--squeeze" type="button" style="color:#fff">
<span class="hamburger-box">
<span class="hamburger-inner">click</span>
</span>
</button>
<nav class="nav" role="navigation">
<ul><li id="menu-item-147" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-147"><a href="#app_feature">Features</a></li>
<li id="menu-item-148" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-148"><a href="#app_why">Why</a></li>
<li id="menu-item-149" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-149"><a href="#app_faq">FAQ</a></li>
<li id="menu-item-150" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-150"><a href="#app_team">Team</a></li>
<li id="menu-item-136" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-136"><a href="#app_footer">Contact</a></li>
</ul> </nav>
</body>
</html>
.nav {
width: 80%;
float: left;
position: absolute;
top: 62px;
left: 70px;
display: none;
transition: all 0.3s; }
@media screen and (max-width: 992px) {
.nav {
top: 40px;
left: 70px; } }
.nav ul {
list-style: none; }
.nav ul li {
list-style: none;
display: inline-block;
padding: 0 18px; }
.nav ul li a {
font-size: 18px;
color: #000;
font-weight: 400; }
.nav ul li a:hover {
text-decoration: none; }
.nav ul li a:active {
text-decoration: none; }
.nav ul li a:visited {
text-decoration: none; }
.nav ul li a:focus {
text-decoration: none; }
.hamburger:hover {
color: #000;
}
Javascript
$(function() {
var $hamburger = $(".hamburger");
$hamburger.on("click", function(e) {
e.preventDefault();
$hamburger.toggleClass("is-active");
$(".nav").toggle().animate({
left: "90px"
}, 300).addClass("animated fadeIn");
});
});