jquery: Warum werden beide Zeilen gleichzeitig ausgeführt?

Dies ist mein Code-Schnipseljquery: Warum werden beide Zeilen gleichzeitig ausgeführt?

$(function() { 

    $(".red-box").fadeOut(2000); //1 
    $(".green-box").fadeOut(2000); //2 
    $(".red-box").fadeIn(2000);//3 


});

index.html unter

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <script src="js/jquery-3.2.1.min.js"></script> 
    <script src="js/script.js"></script> 
    <link rel="stylesheet" href="css/style.css"> 
    <title>TProject Structure</title> 
</head> 
<body> 
    <div id="content"> 
    <h1>Project Structure</h1> 

    <div class="red-box">Red</div> 
    <div class="green-box">Green</div> 
    <div class="blue-box">Blue</div> 
    <div class="clear"></div> 

    <h2>Hi, I'm the Base Project!</h2> 
    <p>Add elements here as you like to try out jQuery. This is your playground to test out anything that comes into your mind.</p> 
    <p><strong>OR:</strong> Copy this project structure into a new directory first to create separate playgrounds for animations, manipulations, event handlers etc.</p> 
    </div> 
</body> 
</html>

gezeigt ist, wenn ich die HTML-Seite öffne Ich habe bemerkt, dass

a) Zunächst sowohl das rote und grünes Feld verblasst zusammen. b) Dann wird die rote Box blendet zurück.

Mein Qs

a) Wie weiß jQuery, dass Linie 1 und Linie 2 miteinander durch die Linie 3, gefolgt ausgeführt werden?

Wenn die Ausführung ist „Zeile für Zeile“ dann sollte jQuery 1 ausgeführt Linie haben (dh für 2s warten, bevor Ausblenden) aus und nach, dass nur Zeile 2 ausgeführt haben, und so weiter ...

Kann jemand erklären, warum die Ausführung von line1 und line2 von jQuery zusammengespielt wird?

Quelle

2017-12-05 Aaron Wilfred

Da Sie diese Funktionen auf _separate Objekte_ aufrufen, gehen sie jeweils in _separate Queues_. Wenn Sie es auf dem Objekt _same_ aufrufen (wie bei 3), fügt es es zu einer bereits vorhandenen Warteschlange hinzu und beginnt erst, nachdem das erste beendet wurde. Sie können ['jqObject.stop (true)'] (https://api.jquery.com/stop/) verwenden, um die Warteschlange zu löschen, wenn Sie dies wirklich möchten. – h2ooooooo

jquery: Warum werden beide Zeilen gleichzeitig ausgeführt?

Antwort

Verwandte Themen