多个DIV的随机闪烁速度

Question

我有以下工作，其中任何ID为＆＃39;闪烁的DIV＆＃39;将以指定的速度闪烁，全部齐声。有没有办法让每个元素在某个速度参数内以随机速率闪烁？

＆＃13;

＆＃13;

jQuery(document).ready(function() {
  blink("div #blink", -1, 400);

  function blink(elem, times, speed) {
    if (times > 0 || times < 0) {
      if ($(elem).hasClass("blink"))
        $(elem).removeClass("blink");
      else
        $(elem).addClass("blink");
    }

    clearTimeout(function() {
      blink(elem, times, speed);
    });

    if (times > 0 || times < 0) {
      setTimeout(function() {
        blink(elem, times, speed);
      }, speed);
      times -= .5;
    }
  }
});

＆＃13;

.blink {
  background: none !important;
}

＆＃13;

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

<div id="blink" style="background-color: blue">Example 1</div>
<div id="blink" style="background-color: blue">Example 2</div>
<div id="blink" style="background-color: blue">Example 3</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以尝试为每个div提供对div元素的更具体的id引用，并在blink函数上运行循环：

＆＃13;

＆＃13;

jQuery(document).ready(function() {
  for(i = 1; i <= 3; i++) {
    blink("#blink-"+i, -1, i*300);
  }
  function blink(elem, times, speed) {
    if (times > 0 || times < 0) {
      if ($(elem).hasClass("blink"))
        $(elem).removeClass("blink");
      else
        $(elem).addClass("blink");
    }

    clearTimeout(function() {
      blink(elem, times, speed);
    });

    if (times > 0 || times < 0) {
      setTimeout(function() {
        blink(elem, times, speed);
      }, speed);
      times -= .5;
    }
  }
});

＆＃13;

.blink {
  background: none !important;
}

＆＃13;

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

<div id="blink-1" style="background-color: blue">Example 1</div>
<div id="blink-2" style="background-color: blue">Example 2</div>
<div id="blink-3" style="background-color: blue">Example 3</div>

＆＃13;

＆＃13;

＆＃13;