随机淡入 <span> 包裹的元素

Question

我正在尝试随机淡入包含在 span 标签中的元素。 stackoverflow 上有一些示例，但我无法让它们在我的代码中工作。

还有.. 有没有比将每个单词都包含在 span 标签中更优雅的方法？

我正在尝试将 akll 跨度转换为一个数组，然后随机选择该数组中的一个元素，并通过更改该元素的不透明度将其淡入，然后将其从数组中删除 这是我尝试的一个 jsfiddle..

https://jsfiddle.net/jnghna9s/2/

我的 script.js：

$(document).ready(function() {
    $("#contact").click(function() {
    var spans = $("#changingP span").get();

    for(var i =0; i < spans.length; i++) {    
        var index = Math.floor(Math.random() * spans.length);
        $(spans[index]).fadeTo(200, 1, function() {
        spans.splice(index,i);
        }
    })
});
});

Answer 1

我会使用 fadeTo 方法的完整回调。这样的事情会起作用：

var spans = $('#changingP span').get();

function fadeIn() {
    var index = Math.floor(Math.random() * spans.length);
    $(spans[index]).fadeTo(200, 1, function() {
        spans.splice(index, 1);
        if (spans.length) {
            fadeIn();
        }
    });
}

fadeIn();

span {
    opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="changingP">
<span>Want </span><span>to </span><span>get </span><span>in</span><span> contact</span><span> with </span><span>me</span><span>?</span>
    <br /><span>Email</span><span>: </span><span>edit</span><span>.</span><span>ed</span><span>email</span><span>@</span><span>gmail</span><span>.</span><span>com</span>
    <br /><span>Link</span><span>edI</span><span>n</span><span>: </span><span>http</span><span>s://w </span><span></span><span>ww.</span><span>lin</span><span>kedi</span><span>n.com</span><span>/</span><span>in/</span><span>edit</span><span>ed</span><span>email</span>

</p>

Answer 2

@dfsq 答案很好。对于像我这样对 jQuery-less 版本感兴趣的极客，也可以使用以下方法：（参见 fiddle）

function randomFade(elements) {
  var shownCount = 0,
      indexes = [];
  function appear(el) {
    setTimeout(function() {
      var count = 10, i = setInterval(function() {
        el.style.opacity = (parseFloat(el.style.opacity) || 0) + 0.1;
          if (!count--) 
             clearInterval(i);
        }, 50);
    }, shownCount++*200); 
  }
  function shuffle(o){
    // from http://stackoverflow.com/questions/6274339/
    // how-can-i-shuffle-an-array-in-javascript#answer-6274381
    for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), 
      x = o[--i], o[i] = o[j], o[j] = x);
    return o;
  };
  for (var i = elements.length; i--;) indexes.push(i);
  indexes = shuffle(indexes);
  for (var f = indexes.length; f--;) appear(elements[indexes[f]]);
}

Answer 3

您的 for 循环逻辑已关闭。试试这个

var maxDelay = 5000;
for(var i=0; i < $length; i++) {
    var random = Math.ceil(Math.random() * maxDelay);
    $('span')eq(i).delay(random).css("opacity","1");
}