2017-12-05 11 views
0

これはjquery:なぜこれらの2行の実行が同時に実行されるのですか?

$(function() { 

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


}); 

index.htmlには、私はHTMLページを開くと、私は

a)まず、両方の赤と緑のボックスという通知をした

<!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> 

の下に示されている私のコードスニペットです一緒にフェードアウトする。 b)に続いて赤いボックスはに戻ってフェード。

マイQsの

a)はどのようにjQueryのライン1とライン2が一緒にライン3に続いて実行されることを知っていますか?

実行が「ラインごと」であれば、jQueryのは、ライン1(すなわちフェードアウトする前に2秒待つ)、それが唯一の2行目を実行しているはずのように...

が誰か缶れた後に実行している必要がありますjQueryによってline1とline2の実行が一体化している理由を説明してください。

+1

これらの関数を_分離オブジェクト上で呼び出すので、それらはそれぞれ独立したキューに入っています。 _same_オブジェクト(3のような)でそれを呼び出すと、既存のキューに追加され、最初のキューが終了した後に最初に開始されます。本当にしたいのなら、['jqObject.stop(true)'](https://api.jquery.com/stop/)を使ってキューをクリアすることができます。 – h2ooooooo

答えて

関連する問題