Problemi con jQuery Animazione in Click - Due volte necessario + Effetto errato

Quindi sto cercando di creare una barra di navigazione con quando si fa clic su un pulsante/span, appare un div, dall'alto, appena sotto la barra di navigazione . Ma quando clicco su "Homer", prima non succede nulla, ma la seconda volta clicco, poi appare CON UN ALTRO EFFETTO, che non ho usato da nessuna parte. [. Non conosco il nome del effetto, ma il div appare da essa la propria alto a sinistra]Problemi con jQuery Animazione in Click - Due volte necessario + Effetto errato

Questo è quello che voglio che sta per accadere:

Quando clicco su 'Homer' nella navigazione bar, un div viene dal corpo al corpo. Il div deve spostarsi su 0px sotto la barra di navigazione, quindi non c'è spazio tra il fondo della barra di navigazione e il div (hidden-homer) in alto. Quando faccio nuovamente clic su Homer, il div (hidden-homer) deve uscire di nuovo dallo schermo, quindi spostando fino a.

In JSFiddle, non funziona affatto ...

Nessun errore in Firefox Console, 1 avvertimento: "L'utilizzo di getPreventDefault() è deprecato Usa defaultPrevented invece.."
Nessun errore in JSHint (JSFiddle)

Quindi 2 problemi:

Quando clicco su "Homer", non succede nulla.
Quando faccio clic una seconda volta su "Homer" - senza ricaricare la pagina - il div appare con un effetto errato nella posizione sbagliata (sotto la barra di navigazione, quindi non è possibile vederne una parte).

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); 
}

fonte

2015-05-01 HydraCles

Quale versione di jQuery stai usando? La forma a due funzioni di '.toggle()' è stata rimossa in 1.9. – Barmar

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

Quindi non è possibile utilizzare '.toggle' in questo modo. Vedi http://stackoverflow.com/questions/2459153/alternative-to-jquerys-toggle-method-that-supports-eventdata – Barmar

Utilizzare una variabile per tenere traccia della direzione in cui il DIV deve spostarsi ogni volta che si fa clic sull'elemento nella barra di navigazione.

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

fonte

2015-05-01 06:34:17 Barmar

Ciao, grazie! Non devo più cliccare due volte ..., ma non funziona. Ottengo un errore su 'down' e non capisco cosa succede (top: up? "-70px": "70px"), una spiegazione veloce potrebbe aiutare. – HydraCles

Spiacente, ho cambiato il nome della variabile da 'down' a' up', ma ho perso alcuni posti. – Barmar

Awww .... Grazie mille, ma ancora ... il div inizia dove deve iniziare (fuori dallo schermo). Ma quando clicco su "Homer", per prima cosa sposta alcuni pixel verso il basso [lo chiamo [1] per ora], poi faccio di nuovo clic, si sposta più in basso [2], poi faccio di nuovo clic su [1], ma non torna indietro dallo schermo ... – HydraCles

Problemi con jQuery Animazione in Click - Due volte necessario + Effetto errato

risposta

Problemi correlati