jqueryでのループ（.each（）メソッドを使用）

Question

ピアノのようなものを作成するために、次のコードを作成しました。ボタン（#start_img）をクリックすると、それぞれ.piano divにはpressクラスが得られ、短い休憩の後で再びそれを削除する必要があります。

次に、関数は次の.piano divにループし、そこで同じアクションを繰り返します。あまりにも難しくはありませんが、問題は動作していないということだけです。コードに何が間違っているのか誰にでも説明できますか？

$('#start_img').on('click', function() { 
 
    $('.piano').each(function(index) { 
 
    $(this).addClass('press').delay(900).removeClass('press'); 
 
    }); 
 
});

.press { 
 
    background-color: silver; 
 
} 
 
.piano { 
 
    border: 1px solid black; 
 
    display: inline-block; 
 
    width: 20px; 
 
    height: 60px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button id='start_img'>Start</button> 
 

 
<div id='page'> 
 
    <div class='piano'></div> 
 
    <div class='piano'></div> 
 
    <div class='piano'></div> 
 
    <div class='piano'></div> 
 
    <div class='piano'></div> 
 
    <div class='piano'></div> 
 
    <div class='piano'></div> 
 
    <div class='piano'></div> 
 
    <div class='piano'></div> 
 
</div>

Answer 1

つの理由。

1. 遅延（）内部でのみ
2. ループが瞬時に実行し、したがって、それらすべてが同時に

あなたが行うことができますをアクティブにする各インスタンスに同一の遅延を追加するアニメーションキューを使用する方法のために動作します何かのように

piano.each(function(index){ 
    var $el = $(this); 
    setTimeout(function(){ 
     $el.addClass('press'); 
     setTimeout(function(){ 
     $el.removeClass('press'); 
     }, 880); 
    }, (index+1) * 900);// multiply delay by index to increment each one 
}); 

Answer 2

特定のインデックスで遅延を使用することができます。

start.on('click', function() { 
    var piano = $('.piano'); 
    piano.each(function(index) { 
    var _this = $(this); 
    _this.addClass('press'); 
    setTimeout(function() { 
     _this.removeClass('press'); 
    }, 900 * index); 
    }); 
});