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

问题描述 投票：0回答：3

我有两个问题。

  • 为什么使字母随机消失的动画对所有字母的速度都不一样？动画不流畅。
  • 如何使动画在另一侧工作？当我用.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>
jquery animation requestanimationframe
3个回答
6
投票

问题

你的脚本中的问题包括一个主要的错误是你生成随机数而不知道生成的数字将用于选择span并隐藏它并且它需要是一个有效的索引，以及它保持的实际发生的事实在生成可能出现两次的数字时，在这种情况下，它会尝试再次隐藏隐藏的字母，并且尝试找到有效索引的等待时间也有时会花费更少的时间或更多时间。这就是隐藏时间不一样的真正原因。

其次，你只是在运行动画，就是它没有停止连续运行的脚本并加载你的浏览器以及setInterrval()，即使它被最小化或切换，你也不知道你的浏览器是什么怜悯，你所有跨度都被隐藏后需要停止它。

该怎么办

  1. 选择您要隐藏的元素。
  2. 使用.toArray()在var say elemArray中获取数组中的元素
  3. 开始生成随机数并验证它是否是elemArray的有效索引，如果不是递归调用它，直到找到范围[0 - elemArray.length]之间的有效索引。
  4. 当你找到一个有效的索引隐藏该索引上的元素并使用splice以这种方式从elemArray中删除该元素时，你将隐藏每个元素一次并进入随机序列
  5. 关于动画，请向requestAnimationFrame()问好 requestAnimationFrame功能，允许您在JavaScript中创建流畅和流畅的动画，而不必担心使其流畅和流畅。只需添加一些调用requestAnimationFrame，您的浏览器就可以完成剩下的工作。而已。它还有助于控制诸如笔记本电脑/手机/平板电脑进入电池模式等因素并将其性能降低一半。诸如另一个选项卡关注的因素。阅读更多Here
  6. 最后，你必须停止动画，所以使用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>
1
投票

第一个问题，即字母隐藏不均匀，是由于随机函数的性质。它会查找一个随机隐藏的字母，隐藏它并选择另一个字母。但随机选择仍然包括已被隐藏的字母，所以它只是隐藏它们 - 这是一个你看不到的操作，所以看起来什么也没发生。您需要删除数组中的字母，因为它们被隐藏，因此它们不再包含在随机选择中。

0
投票

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

<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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.