Question

我制作了以下代码，以创建类似钢琴的东西。当您单击按钮（#start_img）时，每个.piano div应该获得press类，并且在短暂休息后应该再次从中删除它。

然后该函数应循环到下一个.piano div并在那里重复相同的操作。听起来不太难，唯一的问题是它不起作用。任何人都可以向我解释代码有什么问题吗？

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

有两个原因。

delay（）仅适用于内部使用动画队列的方法
循环将立即运行，因此为每个实例添加相同的延迟，使它们全部同时激活

您可以执行类似

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

您可以在特定索引处使用setTimeout延迟。

name: [{value: '', disabled:true}]

在jquery中循环（使用.each（）方法）

2 个答案: