Probleme mit jQuery Bei Klick animieren - zweimal benötigt + falscher Effekt

Also versuche ich eine Navigationsleiste zu erstellen, wenn du auf eine Schaltfläche/einen Bereich klickst, erscheint ein div von oben bis knapp unterhalb der Navigationsleiste . Aber, wenn ich 'Homer' klicke, passiert zuerst nichts, aber beim zweiten Mal klicke ich, dann erscheint es MIT EINEM ANDEREN EFFEKT, den ich nirgends benutzt habe. [. Ich weiß nicht, den Namen des Effekt, aber die div erscheint aus seiner eigenen linken oberen Ecke]Probleme mit jQuery Bei Klick animieren - zweimal benötigt + falscher Effekt

Das ist, was ich will, dass das passieren wird:

Wenn ich auf ‚Homer‘ in der Navigations Bar, ein Div kommt vom Körper auf den Körper. Das div muss unter der Navigationsleiste auf 0 px verschoben werden, also kein Leerzeichen zwischen dem unteren Rand der Navigationsleiste und dem oberen div (hidden-homer). Wenn ich wieder auf Homer klicke, muss der div (hidden-homer) wieder vom Bildschirm verschwinden, also up.

In JSFiddle, ist es nicht funktioniert ...

keine Fehler in Firefox-Konsole, 1 Warnung: "Verwendung von getPreventDefault() ist veraltet Verwenden defaultPrevented statt.."
Keine Fehler in JSHint (JSFiddle)

So 2 Probleme:

Wenn ich auf "Homer" klicke, passiert nichts.
Wenn ich ein zweites Mal auf 'Homer' klicke - ohne die Seite neu zu laden - erscheint das Div mit einem falschen Effekt an der falschen Stelle (unter der Navigationsleiste, so dass Sie keinen Teil davon sehen können).

HTML:

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" href="main.css"> 
    <script src="jquery.js"></script> 
    <title></title> 
    <meta charset="UTF-8"> 
</head> 

<body> 

    <div id="nav"> 
     <span>Homer</span> 
     <span>Marge</span> 
     <span>Bart</span> 
     <span>Lisa</span>  
     <span>Maggie</span> 
    </div> 

    <div id="hidden-homer" class="hidden"> 
     <h1>Homer</h1> 
     <p>Text</p> 
    </div> 

     <div id="hidden-marge" class="hidden"> 
     <h1>Marge</h1> 
     <p>Text</p> 
    </div> 

    <div id="hidden-bart" class="hidden"> 
     <h1>Bart</h1> 
     <p>Text</p> 
    </div> 

     <div id="hidden-lisa" class="hidden"> 
     <h1>Lisa</h1> 
     <p>Text</p> 
    </div> 

    <div id="hidden-maggie" class="hidden"> 
     <h1>Maggie</h1> 
     <p>Text</p> 
    </div> 

    <div id="intro"> 
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/The_Simpsons_Logo.svg/300px-The_Simpsons_Logo.svg.png"> 
    </div>

jQuery:

<script> 
    var main = function() { 
     $('#nav span:nth-child(1)').click(function() { 
      $('#hidden-homer').toggle(function() { 
       $(this).animate({top: '70px'}, 100); 
       }, function() { 
        $(this).animate({top: '-70px'}, 100); 
       }); 
     }); 
    }; 
    $(document).ready(main); 
    </script>

CSS:

body { 
    background-color: #0040FF; 
    padding: 0px; 
    margin: 0px; 
} 

a { 
    outline: none; 
} 

#nav { 
    height: 70px; 
    line-height: 70px; 
    background-color: #FFBF00; 
    font-size: 0px; 
    text-decoration: none; 
    width: 100%; 
    text-align: center; 
    font-family: sans-serif; 
    margin-bottom: none; 
    z-index: 1; 
} 

#nav span { 
    display: inline-block; 
    font-size: 35px; 
    padding-left: 10px; 
    padding-right: 10px; 
    text-align: center; 
    border-right: 3px solid #0040FF; 
    height: 70px; 
    cursor: pointer; 
    color: #0040FF; 
    text-decoration: none; 
    font-weight: bold; 
} 

#nav span:first-child { 
    border-left: 3px solid #0040FF; 
} 

#nav span:hover { 
    background-color: #0040FF; 
    color: #FFBF00; 
} 

.hidden { 
    width: 100%; 
    height: 200px; 
    padding-left: 30px; 
    background-color: #1C1C1C; 
    color: red; 
    font-size: 10px; 
    top: -250px; 
    position: absolute; 
    z-index: -1; 
    border: 2px solid black; 
} 

img { 
    height: 200px; 
    width: 400px; 
    transform: rotate(10deg); 
}

Quelle

2015-05-01 HydraCles

Welche Version von jQuery verwenden Sie? Die Zwei-Funktions-Form von '.toggle()' wurde in 1.9 entfernt. – Barmar

@Barmar Uncompressed: http://code.jquery.com/jquery-1.11.2.js – HydraCles

Dann können Sie '.toggle' nicht so verwenden. Siehe http://stackoverflow.com/questions/2459153/alternative-to-jquerys-toggle-method-that-supports-eventdata – Barmar

Verwenden Sie eine Variable, um zu verfolgen, in welche Richtung sich das DIV bewegen muss, wenn Sie auf das Element in der Navigationsleiste klicken.

var up = true; 
$("#nav span:nth-child(1)").click(function() { 
    $("#hidden-homer").animate({ 
     top: up ? "-70px" : "70px" 
    }, 100); 
    up = !up; 
});

Quelle

2015-05-01 06:34:17 Barmar

Hallo, danke! Ich muss nicht mehr zweimal klicken ..., aber es funktioniert nicht. Ich bekomme einen Fehler über "down" und ich verstehe nicht, was passiert (top: up? "-70px": "70px"), eine schnelle Erklärung würde helfen. – HydraCles

Entschuldigung, ich habe den Namen der Variablen von "down" in "up" geändert, aber einige Stellen verpasst. – Barmar

Awww .... Vielen Dank, aber immer noch ... das Div beginnt, wo es anfangen muss (vom Bildschirm). Aber wenn ich auf "Homer" klicke, bewegt es zuerst einige Pixel nach unten [ich nenne es [1] für den Moment), dann klicke ich wieder, es bewegt sich etwas tiefer [2], dann klicke ich wieder auf [1], aber es geht nicht vom Bildschirm zurück ... – HydraCles

Probleme mit jQuery Bei Klick animieren - zweimal benötigt + falscher Effekt

Antwort

Verwandte Themen