javascript - 如何使用 jQuery 为 div 设置动画？

Question

我正在构建一个简单的 Simon Says/Memory 应用程序，并尝试使用 jQuery 为用户重复模式的一些 div 制作动画。我遇到的问题是按顺序点亮 div。

我最初的想法是使用与特定 div 的 id 相匹配的数组 [1,4,2,3,1,4]

HTML

---

<div class="container">
  <div id="1" class="red square"></div>
  <div id="2" class="yellow square"></div>
  <div id="3" class="blue square"></div>
  <div id="4" class="green square"></div>
</div>

CSS

---

.square{
  width: 200px;
  height: 50px;
  opacity: 0.2;
}

.brighten {
  opacity: 1;
}

从这里开始，我将遍历数组并执行如下操作:

for( var i = 0; i < arr.length; i++){
  var element = $("#"+arr[i]);

  element.addClass('brighten');

  //pause for a half second

  element.removeClass('brighten');
}

作为一个 JS/jQuery 新手，我正在苦苦挣扎，因为 div 正在同时被brighten 和 unbrighten。

I looked at using jQuery animate() but when I use the following code

for (var i = 0; i < arr.length; i++) {
  $("#" + arr[i]).animate({
    opacity: 1,
  }, 500, function() {
    // Animation complete.
    $("#" + arr[i]).animate({
      opacity: 0.2,
    }, 500, function() {
        // Animation complete.
    });
  });
}

all of the divs are being highlighted at once rather than in sequence.

Answer 1

出现问题的原因是您使用的 FOR 循环不会等待第一盏灯变亮/变暗，然后再移动到下一盏灯。您需要找到一种方法来链接这些行为。由于 jQuery animate 不使用真正的 Promise 结构(另一次讨论)，您可能会更有效地使用回调。考虑一下:

var sequence = [1,4,2,3,1,4];
var currentIndex = 0;

// start first light
$('#' + sequence[currentIndex]).addClass('brighten');

// prepare to dim and move to next light
pauseBeforeNextLight();

/**
 * pauses, then turns off one light and turns on the next.
 */
function pauseBeforeNextLight() {
    window.setTimeout(function() {
        var $oldLight = $('#' + sequence[currentIndex]);
        $oldLight.removeClass('brighten');

        if (currentIndex >= sequence.length) {
            // we've reached the end of the sequence. Discontinue
            return;
        }

        currentIndex++; // same as currentIndex = currentIndex + 1

        // turn on the next light
        var $newLight = $('#' + sequence[currentIndex]);
        $newLight.addClass('brighten');

        // leave the new light on for 0.5s, then next. This is INSIDE the
        // timeout, so it WON'T happen immediately like in a for-loop.
        pauseBeforeNextLight() 
    }, 500);
}

这将强制程序在前一盏灯变暗之前不运行下一盏灯。在此示例中，第一盏灯将在下一盏灯亮起的确切时间变暗，然后变化间隔为 0.5 秒。