Question

我有一个包含216个圆形元素的SVG，其想法是圆圈随机分成5组（大约4 x 44和1 x 40，但每组的数字不需要设置在一块）

即。组1在500ms后消失，组2在600ms后消失等。

使用jQuery / JS，创建这5个随机组的最佳方法是什么？随机拆分它们然后为每个组分配一个类？

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 120">
   <circle r="1" cx="5" cy="5"/>
   <circle r="1" cx="5" cy="15"/>
   <circle r="1" cx="5" cy="25"/>
   <!-- etc etc -->
</svg>

// split all 216 circles from above SVG into 5 groups (how?)
// then fade in groups at different speeds, e.g.:
$('circle.group-1').delay(500).fadeIn();
$('circle.group-2').delay(600).fadeIn();
$('circle.group-3').delay(700).fadeIn();
$('circle.group-4').delay(800).fadeIn();
$('circle.group-5').delay(900).fadeIn();

jsFiddle这里：

https://jsfiddle.net/nkvay09x/1/

Answer 1

实现所需要的最简单方法是创建一个可能的延迟值数组，遍历所有circle元素并对fadeIn()应用随机延迟。

这不保证你的44/40分裂，但效果应该足够随机。试试这个：

var delays = [500, 600, 700, 800, 900];

$('circle').each(function() {
  var rnd = Math.floor(Math.random() * delays.length);
  $(this).delay(delays[rnd]).fadeIn();
})

svg {
  width: 400px;
}

svg circle {
  display: none;
  fill: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 120" preserveAspectRatio="xMinYMin">
  <!-- column 1 -->
  <circle r="1" cx="5" cy="5"/>
  <circle r="1" cx="5" cy="15"/>
  <circle r="1" cx="5" cy="25"/>
  <circle r="1" cx="5" cy="35"/>
  <circle r="1" cx="5" cy="45"/>
  <circle r="1" cx="5" cy="55"/>
  <circle r="1" cx="5" cy="65"/>
  <circle r="1" cx="5" cy="75"/>
  <circle r="1" cx="5" cy="85"/>
  <circle r="1" cx="5" cy="95"/>
  <circle r="1" cx="5" cy="105"/>
  <circle r="1" cx="5" cy="115"/>
  <!-- column 2 -->
  <circle r="1" cx="15" cy="5"/>
  <circle r="1" cx="15" cy="15"/>
  <circle r="1" cx="15" cy="25"/>
  <circle r="1" cx="15" cy="35"/>
  <circle r="1" cx="15" cy="45"/>
  <circle r="1" cx="15" cy="55"/>
  <circle r="1" cx="15" cy="65"/>
  <circle r="1" cx="15" cy="75"/>
  <circle r="1" cx="15" cy="85"/>
  <circle r="1" cx="15" cy="95"/>
  <circle r="1" cx="15" cy="105"/>
  <circle r="1" cx="15" cy="115"/>
  <!-- column 3 -->
  <circle r="1" cx="25" cy="5"/>
  <circle r="1" cx="25" cy="15"/>
  <circle r="1" cx="25" cy="25"/>
  <circle r="1" cx="25" cy="35"/>
  <circle r="1" cx="25" cy="45"/>
  <circle r="1" cx="25" cy="55"/>
  <circle r="1" cx="25" cy="65"/>
  <circle r="1" cx="25" cy="75"/>
  <circle r="1" cx="25" cy="85"/>
  <circle r="1" cx="25" cy="95"/>
  <circle r="1" cx="25" cy="105"/>
  <circle r="1" cx="25" cy="115"/>
  <!-- column 4 -->
  <circle r="1" cx="35" cy="5"/>
  <circle r="1" cx="35" cy="15"/>
  <circle r="1" cx="35" cy="25"/>
  <circle r="1" cx="35" cy="35"/>
  <circle r="1" cx="35" cy="45"/>
  <circle r="1" cx="35" cy="55"/>
  <circle r="1" cx="35" cy="65"/>
  <circle r="1" cx="35" cy="75"/>
  <circle r="1" cx="35" cy="85"/>
  <circle r="1" cx="35" cy="95"/>
  <circle r="1" cx="35" cy="105"/>
  <circle r="1" cx="35" cy="115"/>
  <!-- column 5 -->
  <circle r="1" cx="45" cy="5"/>
  <circle r="1" cx="45" cy="15"/>
  <circle r="1" cx="45" cy="25"/>
  <circle r="1" cx="45" cy="35"/>
  <circle r="1" cx="45" cy="45"/>
  <circle r="1" cx="45" cy="55"/>
  <circle r="1" cx="45" cy="65"/>
  <circle r="1" cx="45" cy="75"/>
  <circle r="1" cx="45" cy="85"/>
  <circle r="1" cx="45" cy="95"/>
  <circle r="1" cx="45" cy="105"/>
  <circle r="1" cx="45" cy="115"/>
  <!-- column 6 -->
  <circle r="1" cx="55" cy="5"/>
  <circle r="1" cx="55" cy="15"/>
  <circle r="1" cx="55" cy="25"/>
  <circle r="1" cx="55" cy="35"/>
  <circle r="1" cx="55" cy="45"/>
  <circle r="1" cx="55" cy="55"/>
  <circle r="1" cx="55" cy="65"/>
  <circle r="1" cx="55" cy="75"/>
  <circle r="1" cx="55" cy="85"/>
  <circle r="1" cx="55" cy="95"/>
  <circle r="1" cx="55" cy="105"/>
  <circle r="1" cx="55" cy="115"/>
  <!-- column 7 -->
  <circle r="1" cx="65" cy="5"/>
  <circle r="1" cx="65" cy="15"/>
  <circle r="1" cx="65" cy="25"/>
  <circle r="1" cx="65" cy="35"/>
  <circle r="1" cx="65" cy="45"/>
  <circle r="1" cx="65" cy="55"/>
  <circle r="1" cx="65" cy="65"/>
  <circle r="1" cx="65" cy="75"/>
  <circle r="1" cx="65" cy="85"/>
  <circle r="1" cx="65" cy="95"/>
  <circle r="1" cx="65" cy="105"/>
  <circle r="1" cx="65" cy="115"/>
  <!-- column 8 -->
  <circle r="1" cx="75" cy="5"/>
  <circle r="1" cx="75" cy="15"/>
  <circle r="1" cx="75" cy="25"/>
  <circle r="1" cx="75" cy="35"/>
  <circle r="1" cx="75" cy="45"/>
  <circle r="1" cx="75" cy="55"/>
  <circle r="1" cx="75" cy="65"/>
  <circle r="1" cx="75" cy="75"/>
  <circle r="1" cx="75" cy="85"/>
  <circle r="1" cx="75" cy="95"/>
  <circle r="1" cx="75" cy="105"/>
  <circle r="1" cx="75" cy="115"/>
  <!-- column 9 -->
  <circle r="1" cx="85" cy="5"/>
  <circle r="1" cx="85" cy="15"/>
  <circle r="1" cx="85" cy="25"/>
  <circle r="1" cx="85" cy="35"/>
  <circle r="1" cx="85" cy="45"/>
  <circle r="1" cx="85" cy="55"/>
  <circle r="1" cx="85" cy="65"/>
  <circle r="1" cx="85" cy="75"/>
  <circle r="1" cx="85" cy="85"/>
  <circle r="1" cx="85" cy="95"/>
  <circle r="1" cx="85" cy="105"/>
  <circle r="1" cx="85" cy="115"/>
  <!-- column 10 -->
  <circle r="1" cx="95" cy="5"/>
  <circle r="1" cx="95" cy="15"/>
  <circle r="1" cx="95" cy="25"/>
  <circle r="1" cx="95" cy="35"/>
  <circle r="1" cx="95" cy="45"/>
  <circle r="1" cx="95" cy="55"/>
  <circle r="1" cx="95" cy="65"/>
  <circle r="1" cx="95" cy="75"/>
  <circle r="1" cx="95" cy="85"/>
  <circle r="1" cx="95" cy="95"/>
  <circle r="1" cx="95" cy="105"/>
  <circle r="1" cx="95" cy="115"/>
  <!-- column 11 -->
  <circle r="1" cx="105" cy="5"/>
  <circle r="1" cx="105" cy="15"/>
  <circle r="1" cx="105" cy="25"/>
  <circle r="1" cx="105" cy="35"/>
  <circle r="1" cx="105" cy="45"/>
  <circle r="1" cx="105" cy="55"/>
  <circle r="1" cx="105" cy="65"/>
  <circle r="1" cx="105" cy="75"/>
  <circle r="1" cx="105" cy="85"/>
  <circle r="1" cx="105" cy="95"/>
  <circle r="1" cx="105" cy="105"/>
  <circle r="1" cx="105" cy="115"/>
  <!-- column 12 -->
  <circle r="1" cx="115" cy="5"/>
  <circle r="1" cx="115" cy="15"/>
  <circle r="1" cx="115" cy="25"/>
  <circle r="1" cx="115" cy="35"/>
  <circle r="1" cx="115" cy="45"/>
  <circle r="1" cx="115" cy="55"/>
  <circle r="1" cx="115" cy="65"/>
  <circle r="1" cx="115" cy="75"/>
  <circle r="1" cx="115" cy="85"/>
  <circle r="1" cx="115" cy="95"/>
  <circle r="1" cx="115" cy="105"/>
  <circle r="1" cx="115" cy="115"/>
  <!-- column 13 -->
  <circle r="1" cx="125" cy="5" />
  <circle r="1" cx="125" cy="15" />
  <circle r="1" cx="125" cy="25" />
  <circle r="1" cx="125" cy="35" />
  <circle r="1" cx="125" cy="45" />
  <circle r="1" cx="125" cy="55" />
  <circle r="1" cx="125" cy="65" />
  <circle r="1" cx="125" cy="75" />
  <circle r="1" cx="125" cy="85" />
  <circle r="1" cx="125" cy="95" />
  <circle r="1" cx="125" cy="105" />
  <circle r="1" cx="125" cy="115" />
  <!-- column 14 -->
  <circle r="1" cx="135" cy="5" />
  <circle r="1" cx="135" cy="15" />
  <circle r="1" cx="135" cy="25" />
  <circle r="1" cx="135" cy="35" />
  <circle r="1" cx="135" cy="45" />
  <circle r="1" cx="135" cy="55" />
  <circle r="1" cx="135" cy="65" />
  <circle r="1" cx="135" cy="75" />
  <circle r="1" cx="135" cy="85" />
  <circle r="1" cx="135" cy="95" />
  <circle r="1" cx="135" cy="105" />
  <circle r="1" cx="135" cy="115" />
  <!-- column 15 -->
  <circle r="1" cx="145" cy="5" />
  <circle r="1" cx="145" cy="15" />
  <circle r="1" cx="145" cy="25" />
  <circle r="1" cx="145" cy="35" />
  <circle r="1" cx="145" cy="45" />
  <circle r="1" cx="145" cy="55" />
  <circle r="1" cx="145" cy="65" />
  <circle r="1" cx="145" cy="75" />
  <circle r="1" cx="145" cy="85" />
  <circle r="1" cx="145" cy="95" />
  <circle r="1" cx="145" cy="105" />
  <circle r="1" cx="145" cy="115" />
  <!-- column 16 -->
  <circle r="1" cx="155" cy="5" />
  <circle r="1" cx="155" cy="15" />
  <circle r="1" cx="155" cy="25" />
  <circle r="1" cx="155" cy="35" />
  <circle r="1" cx="155" cy="45" />
  <circle r="1" cx="155" cy="55" />
  <circle r="1" cx="155" cy="65" />
  <circle r="1" cx="155" cy="75" />
  <circle r="1" cx="155" cy="85" />
  <circle r="1" cx="155" cy="95" />
  <circle r="1" cx="155" cy="105" />
  <circle r="1" cx="155" cy="115" />
  <!-- column 17 -->
  <circle r="1" cx="165" cy="5" />
  <circle r="1" cx="165" cy="15" />
  <circle r="1" cx="165" cy="25" />
  <circle r="1" cx="165" cy="35" />
  <circle r="1" cx="165" cy="45" />
  <circle r="1" cx="165" cy="55" />
  <circle r="1" cx="165" cy="65" />
  <circle r="1" cx="165" cy="75" />
  <circle r="1" cx="165" cy="85" />
  <circle r="1" cx="165" cy="95" />
  <circle r="1" cx="165" cy="105" />
  <circle r="1" cx="165" cy="115" />
  <!-- column 18 -->
  <circle r="1" cx="175" cy="5" />
  <circle r="1" cx="175" cy="15" />
  <circle r="1" cx="175" cy="25" />
  <circle r="1" cx="175" cy="35" />
  <circle r="1" cx="175" cy="45" />
  <circle r="1" cx="175" cy="55" />
  <circle r="1" cx="175" cy="65" />
  <circle r="1" cx="175" cy="75" />
  <circle r="1" cx="175" cy="85" />
  <circle r="1" cx="175" cy="95" />
  <circle r="1" cx="175" cy="105" />
  <circle r="1" cx="175" cy="115" />
</svg>

Answer 2

你可以使用这种技术：

$(document).ready(function($) {
    var numberOfGroups = 5;
    var numberOfCircles = $('circle').length;
    var groupMinSize = Math.floor(numberOfCircles / numberOfGroups);

    for (var i = 1; i <= numberOfGroups; i++) {
        if (i < numberOfGroups) {
        $('circle:lt(' + (i * groupMinSize) + ')').delay(500 + i * 100).fadeIn();
      } else {
        $('circle:gt(' + ((i - 1) * groupMinSize) + ')').delay(500 + i * 100).fadeIn();
      }
    }
});

demo

Answer 3

https://jsfiddle.net/nkvay09x/2/

添加1到5之间的组类

var max_groups = 5;
$('circle').each(function() {
    var target_group = Math.floor(Math.random() * max_groups) + 1;

    $(this).attr('class', 'group-'+target_group);
});

使用JS / jQuery

3 个答案: