JS Menü Animation für die Website funktioniert nicht

Question

Ich habe die folgende JS auf meiner Website hinzugefügt, um ein Side-Menü hinzuzufügen, das von links herausgleitet und es funktioniert nicht. Ich bin ziemlich unerfahren mit JS, daher ist jeder Rat hilfreich.

/*global $, jQuery, alert*/ 
var main = function() { 
    "use strict"; 
    $('.icon-menu').click(function() { 
     $('.menu').animate({ 
      marginLeft: "150px" 
     }, 200); 

     $('body').animate({ 
      marginLeft: "150px" 
     }, 200); 
    }); 

    $('.icon-close').click(function() { 
     $('.menu').animate({ 
      marginLeft: "-150px" 
     }, 200); 

     $('body').animate({ 
      marginLeft: "0px" 
     }, 200); 
    }); 
}; 


$(document).ready(main); 

Symbol-Menü und Symbol-Nähe ist beiden Bilder, Icon-Menü auf der Seite und sollte das Menü offenbaren, die ein div ist. Icon-Close steht auf dem Menü div.

HTML:

<div class="menu"> 
     <div class="icon-close"> 
      <img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png"> 
     </div> 

     <div class="link" id="joinLink"><a href="joinPage.html">Join </a></div> 
     <div class="link" id="returnsLink"><a href="returns.html">Returns</a></div> 
     <div class="link" id="methodsLink"><a href="methods.html">Methods</a></div> 
    </div> 
    <img class="icon-menu" src="https://cdn1.iconfinder.com/data/icons/web-ui-2/16/UI_Icons_Outline-29-128.png"/> 

CSS:

.menu { 
background-color: white; 
left: -150px; 
top: 150px; 
height: 1000px; 
position: fixed; 
width: 150px; 
} 

.icon-close{ 
    height: 20px; 
    width:20px; 
    cursor: pointer; 
    padding-left: 10px; 
    padding-top: 10px; 


} 

.icon-menu{ 
    height: 30px; 
    width: 30px; 
    margin-top: -320px; 
    margin-left: 7px; 
    float: left; 
    cursor: pointer; 
    text-decoration: none; 
    text-transform: uppercase; 
} 

Answer 1

ohne HTML-Struktur von Ihnen oder CSS, ich habe gerade dieses einfache Beispiel:

erste, mit CSS gesetzt eine inital Position für die .menu. Ich benutzte position:relative und left:-150px;.

dann mit JQ Umschalten zwischen left:0 (die .menu zeigen) und left:-150px (die die .menu verstecken).

Ich habe auch die Tasten umgeschaltet, so dass jeweils nur eine angezeigt wird.

Es gibt eine Reihe von Möglichkeiten, dies zu tun, aber ich wollte Ihren Code so wenig wie möglich ändern.

Sie brauchen nicht die body, Stil, Stil einfach die .menu

EDIT: bearbeitet Snippet mit HTML und CSS (mit Änderungen)

Ich schlage vor, stellen Sie beide icon-menu und icon-close außerhalb die .menu. und entfernen Sie auch die margin-top von .icon-menu

var main = function() { 
 
    "use strict"; 
 
    $('.icon-menu').click(function() { 
 
     $(this).hide() 
 
     $('.icon-close').show() 
 
     $('.menu').animate({ 
 
      left: "0" 
 
     }, 200); 
 

 
     
 
    }); 
 

 
    $('.icon-close').click(function() { 
 
     $(this).hide() 
 
     $('.icon-menu').show() 
 
     $('.menu').animate({ 
 
      left: "-150px" 
 
     }, 200); 
 

 
     
 
    }); 
 
}; 
 

 

 
$(document).ready(main);

.menu { 
 
background-color: white; 
 
left: -150px; 
 
top: 40px; 
 
height: 1000px; 
 
position: fixed; 
 
width: 150px; 
 
} 
 

 
.icon-close{ 
 

 
    height: 30px; 
 
    width: 30px; 
 
    margin-top: 0; 
 
    margin-left: 7px; 
 
    float: left; 
 
    cursor: pointer; 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
    display:none; 
 

 
} 
 

 
.icon-menu{ 
 
    height: 30px; 
 
    width: 30px; 
 
    margin-top: 0; 
 
    margin-left: 7px; 
 
    float: left; 
 
    cursor: pointer; 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
}

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

 
     <div class="link" id="joinLink"><a href="joinPage.html">Join </a></div> 
 
     <div class="link" id="returnsLink"><a href="returns.html">Returns</a></div> 
 
     <div class="link" id="methodsLink"><a href="methods.html">Methods</a></div> 
 
    </div> 
 
    <img class="icon-menu" src="https://cdn1.iconfinder.com/data/icons/web-ui-2/16/UI_Icons_Outline-29-128.png"/> 
 

 
    <img class="icon-close" src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png"/>