jQuery .animation() Funktion läuft Zeile zweimal und funktioniert nicht

Question

Ich habe versucht, an einer Funktion zu arbeiten, um meine Seite an die Oberseite der Seite zu scrollen, wenn ich auf einen Anker klicke. Mein jQuery-Skript wie folgt aussieht:

$("a#drop-user-box").click(function() 
          { 
    console.log("foor"); //Would return foo value once 
    $("html, body").animate({scrollTop: 0}, "slow", function() 
    { 
    //console.log("foor"); Would return foo value twice? 

    // Code doesn't work when in here 
    // $(".drop-down").toggleClass('hidden'); 
    // $(".drop-down input[type='e-mail']:first-of-type").focus(); 
    }); 
    // Code does work when in here 
    // $(".drop-down").toggleClass('hidden'); 
    // $(".drop-down input[type='e-mail']:first-of-type").focus(); 
}); 

Was ist der Unterschied mit der Ausführung des Stück Code außerhalb der animate() Funktion und in ihm? Und warum funktioniert der Code nicht, wenn sich die beiden Zeilen für das Dropdown-Feld innerhalb der .animate()-Funktion befinden? Bitte erläutern Sie mir, wie das funktioniert.

Vielen Dank im Voraus,

Edit:

Wie würde ich diese Arbeit ?:

$("a#drop-user-box").click(function(e) { 
 
\t e.preventDefault(); 
 
    $("html, body").animate({ 
 
     scrollTop: 0 
 
    }, "slow", function() { 
 
     $('.drop-down').show(); 
 
    }); 
 
});

.user-box .drop-down 
 
{ 
 
    padding: 15px 25.5px; 
 
\t display: block; 
 
    border: 1px solid #aaa; 
 
\t background-color: #fff; 
 
} 
 

 
.user-box .drop-down form 
 
{ 
 
\t width: 250px; 
 
} 
 

 
.space 
 
{ 
 
    border: 1px solid #000; 
 
    height: 900px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="drop-down hidden"> 
 
    <form action="" method="post"> 
 
    <div class="form-group"> 
 
     <input type="e-mail" class="form-control text-box single-line" name="E-mail" placeholder="E-mail adres"> 
 
    </div> 
 
    <div class="form-group"> 
 
     <input type="password" class="form-control text-box single-line" name="Wachtwoord" placeholder="Wachtwoord"> 
 
    </div> 
 
    <div class="checkbox"> 
 
     <label> 
 
     <input type="checkbox"> Bewaar login informatie 
 
     </label> 
 
    </div> 
 
    <input type="submit" class="btn btn-default" value="inloggen"> 
 
    </form> 
 
    <a href="#">Wachtwoord vergeten?</a> 
 
</div> 
 

 
<div class="space"> 
 

 
</div> 
 

 
<a href="#" id="drop-user-box">Foo</a>

Answer 1

Der Grund, dass es nicht funktioniert hat, weil die Die Funktion .show() entfernt den Klassennamen "hidden" nicht. Die .show() & .hide() Funktionen arbeiten mit den Eigenschaften style = "display: block" und style = "display: none" &. So werden Sie diese Zeile HTML ändern müssen:

<div class="drop-down hidden"> 

Um dies:

<div class="drop-down" style="display:none"> 

Dann wird es funktionieren. Sehen Sie diese jsfiddle für die Demo.