Question

我编写了一个脚本，创建了一组以圆圈排列的小圆圈，这些圆圈通过循环逐个添加到DOM中。完成第一个循环后（所以我希望这是i == 54时）我想开始另一个循环，从列表中的第一个圆开始，一个接一个地将圆的颜色从灰色变为红色

这是我的代码：

var i = 1;
var appendCircle = function loop() {

  setTimeout(function() {
    var $circle = "<div class='circle circle" + i + "' style='transform:rotate(" + 7.2 * i + "deg) translate(3em)'></div>";
    var $container = $(".circles-wrapper .circles");
    $container.append($circle);
    i++;

    if (i < 55) {
      loop();
    }
  }, 20);

  // this is the problem because this change color of all small circles at once.

  if (i == 54) {
    setTimeout(function() {

      $(".circle").each(function() {
        $(this).css({
          "background": "blue"
        });
      })
    }, 20);
  }
};

setTimeout(appendCircle, 100);

.circles-wrapper {
  position: absolute;
  top: 39%;
  left: 51%;
}
.circles {
  position: relative;
  transform: rotateY(48deg);
}
.circle {
  width: .2em;
  height: .2em;
  margin: -.2em;
  border-radius: 50%;
  background: #ceced0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="circles-wrapper">
  <div class="circles"></div>
</div>

Answer 1

你给每个圆圈提供了“圆圈”+索引类，所以你要做的就是遍历每个索引并改变每个元素的背景颜色。我所做的是使用相同的循环功能，在我达到55后，我拿了它的mod 55并用它来选择圆圈。代码和代码段如下。

我也注意到有些圆圈重叠。如果你生成50个圆圈，那么就不会有任何重叠。我写下面的代码来反映这一点。

var i = 1;
var appendCircle = function loop() {
  setTimeout(function() {
    if (i < 51) {
		var $circle = "<div class='circle circle" + i + "' style='transform:rotate(" + 7.2 * i + "deg) translate(3em)'></div>";
		var $container = $(".circles-wrapper .circles");
		$container.append($circle);
    }
	else{
		var circleIndex = (i % 51)+1;
		$(".circle"+circleIndex).css("background-color", "blue");
	}
	
	if(i<109){
		loop();
	}
	i++;
  }, 20);
};

setTimeout(appendCircle, 100);

.circles-wrapper {
  position: absolute;
  top: 39%;
  left: 51%;
}
.circles {
  position: relative;
  transform: rotateY(48deg);
}
.circle {
  width: .2em;
  height: .2em;
  margin: -.2em;
  border-radius: 50%;
  background: #ceced0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="circles-wrapper">
  <div class="circles"></div>
</div>

Answer 2

在您第一次通过后，您可能想要找到创建的圆圈并修改它们。您正在为他们提供circle + i课程，以便您轻松找到他们。检查代码片段。我添加了第三遍，因为。

var i = 1,
  CIRCLE_COUNT = 52;
var appendCircle = function loop() {

  setTimeout(function() {
    i++;

    // first pass
    if (i < CIRCLE_COUNT * 1) {

      var $circle = "<div class='circle circle" + i + "' style='transform:rotate(" + 7.2 * i + "deg) translate(3em)'></div>";
      var $container = $(".circles-wrapper .circles");
      $container.append($circle);
    } 
    // second pass
    else if (i < CIRCLE_COUNT * 2) {
      $(".circle" + (i % CIRCLE_COUNT+1)).css('background', 'blue');
    }
    
    // third pass
    else if (i < CIRCLE_COUNT * 3) {
      $(".circle" + (i % CIRCLE_COUNT+1)).remove();
    }
    
    // keep looping?
    if (i <= CIRCLE_COUNT * 3)
      loop();

  }, 20);


};

setTimeout(appendCircle, 100);

.circles-wrapper {
  position: absolute;
  top: 39%;
  left: 51%;
}
.circles {
  position: relative;
  transform: rotateY(48deg);
}
.circle {
  width: .2em;
  height: .2em;
  margin: -.2em;
  border-radius: 50%;
  background: #ceced0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="circles-wrapper">
  <div class="circles"></div>
</div>

Answer 3

这样的事情？我在你的.each()中设置了一个超时功能，以便在你将圆圈的颜色更改为蓝色时，在循环的每次迭代之间产生延迟

＆＃13;

var i = 1;
var appendCircle = function loop() {

  setTimeout(function() {
    var $circle = "<div class='circle circle" + i + "' style='transform:rotate(" + 7.2 * i + "deg) translate(3em)'></div>";
    var $container = $(".circles-wrapper .circles");
    $container.append($circle);
    i++;

    if (i < 55) {
      loop();
    }
  }, 20);

  // this is the problem because this change color of all small circles at once.

  if (i == 54) {
    var time = 50;
    $(".circle").each(function() {
      var $this = $(this)
      setTimeout(function(){
        $this.css({
          "background": "blue"
        }); 
      }, time)
      time += 50;

    });
  }
};

setTimeout(appendCircle, 100);

＆＃13;

.circles-wrapper {
  position: absolute;
  top: 39%;
  left: 51%;
}
.circles {
  position: relative;
  transform: rotateY(48deg);
}
.circle {
  width: .2em;
  height: .2em;
  margin: -.2em;
  border-radius: 50%;
  background: #ceced0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="circles-wrapper">
  <div class="circles"></div>
</div>

＆＃13;

Answer 4

您需要更改一个元素的CSS，然后启动超时以更改下一个元素。

＆＃13;

var i = 1;
var appendCircle = function loop() {

  setTimeout(function() {
    var $circle = "<div class='circle circle" + i + "' style='transform:rotate(" + 7.2 * i + "deg) translate(3em)'></div>";
    var $container = $(".circles-wrapper .circles");
    $container.append($circle);
    i++;

    if (i < 55) {
      loop();
    }
  }, 20);

  var j = 0;

  function changeColor() {
    $(".circle").eq(j).css("background", "blue");
    j++;
    if (j >= $(".circle").length) {
      clearInterval(changeInterval);
    }
  }
  if (i == 53) {
    setInterval(changeColor, 20);
  }

}
setTimeout(appendCircle, 100);

＆＃13;

.circles-wrapper {
  position: absolute;
  top: 39%;
  left: 51%;
}
.circles {
  position: relative;
  transform: rotateY(48deg);
}
.circle {
  width: .2em;
  height: .2em;
  margin: -.2em;
  border-radius: 50%;
  background: #ceced0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="circles-wrapper">
  <div class="circles"></div>
</div>

＆＃13;

Answer 5

jQuery有一些功能可以使这类动画变得相当简单，但你需要了解几种方法。

jQuery＆＃39; .delay()，.promise()，.then()和javascript＆＃39; s Array.prototype.reduce()可以按如下方式利用：

var appendCircles = function($container) {
    //create and append hidden circles
    for(var i=0; i<50; i++) {
        $("<div class='circle'></div>").css('transform', 'rotate(' + 7.2 * i + 'deg) translate(3em)').hide().appendTo($container);
    }

    //find the freshly appended hidden circles
    var $circles = $container.find(".circle");

    //initial delay
    $circles.eq(0).delay(100).promise()
    .then(function() {
        //show the circles, one by one
        return $circles.get().reduce(function(promise, el) {
            return promise.then(function() {
                return $(el).show().delay(20).promise();
            });
        }, $.when());//$when() is a resolved promise that gets the built promise chain started
    })
    .then(function() {
        //make circles blue, one by one
        return $circles.get().reduce(function(promise, el) {
            return promise.then(function() {
                return $(el).css('backgroundColor', 'blue').delay(20).promise();
            });
        }, $.when());//$when() is a resolved promise that gets the built promise chain started
    });
};

appendCircles($(".circles"));

<强> codepen

.reduce()可能需要一些解释。 $circles.get()返回一个数组，.reduce(...)用于构建一个等同于initialPromise.then(...).then(...).then(...)的promise链。这个技巧按顺序执行两次，以给出初始＆＃34;显示＆＃34;效果，然后是变色效果。

如果你想用jQuery制作自定义动画序列，这套方法值得学习。

逐个改变项目的颜色

5 个答案: