jQuery：随机但等间隔地动画隐藏字母

Question

我有两个问题。

为什么让字母随机消失的动画不是所有字母都遵循相同的速度？动画不流畅。
如何让动画在对面起作用？当我用 .hide() 隐藏 div 并尝试使其不透明时，这是行不通的。我已经尝试过不同的解决方案，但实际上没有什么能让 div 出现。

代码：

function wow1 () {

 var mail1 = $(".mailFirst h2");
 var letters = mail1.children();

 setInterval(function() {
  letters.eq(Math.random()*letters.length |0).animate({opacity:0},500);
 },500);
}

$(document).ready(wow1);

.mailFirst {position: absolute;
          top: 0;
          left: 0;
          color: red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mailFirst">
  <h2> 
    <span> @ </span>
    <span> E </span>
    <span> - </span>
    <span> M </span>
    <span> a </span>
    <span> i </span>
    <span> l </span>
    <span> @ </span>
  </h2>
</div>

Answer 1

第一个问题，字母隐藏不均匀，是由于随机函数的性质造成的。它寻找一个随机隐藏的字母，将其隐藏并选择另一个。但是随机选择仍然包括已经被隐藏的字母，所以它只是再次隐藏它们——这是一个你看不到的操作，所以看起来什么都没有发生。当字母被隐藏时，您需要从数组中删除它们，这样它们就不再包含在随机选择中。

Answer 2

史蒂夫解释得很好，但这是它的代码。

<html>

<head>
  <style>
    .mailFirst {
      position: absolute;
      top: 0;
      left: 0;
      color: red;
    }
  </style>
</head>

<body>
  <div class="mailFirst">
    <h2>
      <span> @ </span>
      <span> E </span>
      <span> - </span>
      <span> M </span>
      <span> a </span>
      <span> i </span>
      <span> l </span>
      <span> @ </span>
    </h2>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script>
    var mail1 = $(".mailFirst h2");
    var letters = mail1.children();
    var numberOfSpans = letters.length;
    var hiddenSpans = 0;

    function changeOpacity() {
    
      setTimeout(
        function() {
          var ind;
          var opc;

          do {
            var ind = (Math.random() * letters.length | 0);
            var opc = Number(letters.eq(ind).css("opacity"));
            console.log("index: " + ind + " and opc: " + opc);
          } while (opc != 1)

          letters.eq(ind).animate({
            opacity: 0
          }, 500);

          hiddenSpans++;
          if (hiddenSpans < numberOfSpans) {
            changeOpacity();
          }
        }, 500
      );
    }
    $(document).ready(changeOpacity);
  </script>
</body>

</html>

Answer 3

问题

您脚本中的问题包括一个主要错误，即您在生成随机数时没有意识到生成的数字将用于 select 一个 span 并隐藏它，它需要成为一个有效的索引，实际上发生了什么，它不断生成可能出现两次的数字，在这种情况下，它会尝试再次隐藏隐藏的字母，以及试图找到也没有隐藏的有效索引的等待时间有时花的时间更少，有时花的时间更多。所以这就是隐藏时间不一样的真正原因。

其次，你只是运行动画，仅此而已，脚本不会停止，它会持续运行并加载你的浏览器以及 setInterrval() 单独不是已知对您的浏览器有怜悯，即使它被最小化或标签切换，您需要在所有 span 被隐藏后停止它。

做什么

Select 你必须隐藏的元素。
在 var 中使用 .toArray() 获取数组中的元素，比如 elemArray
开始生成随机数并验证它是否是 elemArray 的有效索引，如果不是递归调用它，直到找到范围 [0 - elemArray.length] 之间的有效索引。
当您找到一个有效的索引时，隐藏该索引上的元素并使用 splice 从 elemArray 中删除该元素，这样您将隐藏每个元素一次并进入随机序列
关于动画，向requestAnimationFrame()
问好
requestAnimationFrame 功能可让您在 JavaScript 中创建流畅流畅的动画，而无需真正担心制作流畅流畅的动画。只需添加对 requestAnimationFrame 的几个调用，您的浏览器就会处理剩下的事情。而已。它还有助于控制诸如您的笔记本电脑/ phone/tablet 进入电池模式并将其性能降低一半等因素。诸如另一个选项卡获得焦点等因素。阅读更多 Here
最后，你也必须停止动画所以使用 requestAnimationFrame 函数的兄弟 cancelAnimationFrame

见下文我为您创建了一个演示，希望它能帮助您。

var framesPerSecond = 10;
var letters = $(".mailFirst>h2 span");
var elemArray = letters.toArray();
// store your requestAnimatFrame request ID value
var requestId;

//the animation function
function animate() {
  setTimeout(function() {

    //save the id returned from the function to use it 
    //for canceling or stopping the animation

    requestId = requestAnimationFrame(animate);

    // animating/drawing code goes here
    hideRandomWord();

    //check if there are no more elements left to hide
    if (!elemArray.length) {
      stopAnimation(requestId);
    }
  }, 2000 / framesPerSecond);
}
//start animation
requestAnimationFrame(animate);

//function to hide a character / word
function hideRandomWord() {

  var min = 0;
  var max = Math.floor(elemArray.length);

  //The maximum is exclusive and the minimum is inclusive
  var rand = Math.floor(Math.random() * (max - min)) + min;
  
  //if elements array is not empty
  if (elemArray.length) {

    //if the generated index is a valid index for the elements array
    if (typeof elemArray[rand] !== 'undefined') {

     //animate opacity 
      $(elemArray[rand]).animate({
        opacity: 0
      });
      //remove the element from the elements array
      elemArray.splice(rand, 1);
    } else {
      //call recursively it self if not valid index generated
      hideRandomWord();
    }
  }
}

function stopAnimation(requestId) {
  // use the requestID to cancel the requestAnimationFrame call
  cancelAnimationFrame(requestId);
}

.mailFirst {
  position: absolute;
  top: 0;
  left: 0;
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mailFirst">
  <h2>
    <span> @ </span>
    <span> E </span>
    <span> - </span>
    <span> M </span>
    <span> a </span>
    <span> i </span>
    <span> l </span>
    <span> @ </span>
  </h2>
</div>

jQuery：随机但等间隔地动画隐藏字母

jQuery: animate hide letters randomly but with equal intervals

jquery

animation

requestanimationframe

问题

做什么