jQuery:随机但间隔相等地对隐藏的字母进行动画处理 [英] jQuery: animate hide letters randomly but with equal intervals

问题描述

我有两个问题.

• 为什么使字母随机消失的动画没有对所有字母都遵循相同的速度?动画不流畅.

• Why the animation that makes the letters randomly disappear doesn't follow the same speed for all the letters? The animation is not fluid.

如何使动画在另一侧起作用?当我使用.hide()隐藏div并尝试使其不透明时，它将不起作用.我已经尝试过其他解决方案，但实际上没有任何东西可以使div出现.

How can I make the animation works on the opposite side? When I hide the div with .hide() and I try to make it appear with opacity this won't work. I tried different solution already but really nothing makes the div appear.

代码:

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>

推荐答案

问题

脚本中的问题包括一个主要错误，即您正在生成随机数，而没有意识到以下事实:生成的数字将用于选择span并将其隐藏，并且它必须是有效索引，以及实际上，它不断生成可能重复两次的数字，在这种情况下，它将尝试再次隐藏隐藏的字母，并且等待查找未隐藏的有效索引的等待时间有时会花费更少的时间，有时甚至更多.所以这就是隐藏时间不同的真正原因.

Problems

The problems in your script includes one major fault is that you are generating random numbers unaware from the fact that the generated number will be used to select a span and hide it and it needs to be a valid index, and what actually happens that it keeps on generating numbers which may occur twice, in which case it will try to hide the hidden letter again, and the waiting period of trying to find the valid index which is also not hidden it sometime takes less time or sometimes more. so that is the real reason behind the hiding time not being the same.

其次，您只是在运行动画，就是它不会停止脚本的运行，脚本会持续运行并加载浏览器以及setInterrval()，即使将其最小化，也不会对浏览器产生任何怜悯或标签页切换后，您需要在所有跨度都被隐藏后将其停止.

Secondly, you are just running the animation and that's it there is no stopping of the script it is continuously running and loading your browser along with setInterrval() which alone is not known to have mercy on your browser even if it is minimized or tab switched, you need to stop it once all spans are hidden.

1. 选择要隐藏的元素.

1. Select the elements you have to hide.

使用 .toArray() 在变量中说

Get elements in an array using .toArray() in a var say elemArray

开始生成随机数，并验证它是否是elemArray的有效索引，如果没有递归调用它，直到找到[0 - elemArray.length]范围之间的有效索引.

Start generating the random number and validate if it is a valid index for the elemArray if not call it recursively until you find a valid index between the range [0 - elemArray.length].

当找到有效索引时，请隐藏该索引上的元素，然后使用splice从elemArray中删除该元素，则将每个元素隐藏一次并随机排列

When you find a valid index hide the element on that index and use splice to remove that element from the elemArray in this way you will hide every element once and into a random sequence

现在有关动画，请向 requestAnimationFrame()

Now about animations, Say Hello to requestAnimationFrame()

requestAnimationFrame函数，使您可以在JavaScript中创建平滑流畅的动画，而不必担心使其平滑流畅.只需添加几个对requestAnimationFrame的调用，您的浏览器就会处理其余的工作.而已.并且还有助于控制诸如笔记本电脑/手机/平板电脑进入电池模式并将其性能降低一半之类的因素.诸如其他标签成为焦点的因素.了解更多信息 Here

requestAnimationFrame function that allows you to create smooth and fluid animations in JavaScript without you actually having to worry about making it smooth and fluid. Just add a few calls to requestAnimationFrame and your browser takes care of the rest. That's it. and it also helps to control the factors such as your laptop/ phone/tablet going into battery mode and halving its performance reduced. Factors such as another tab taking focus. Read More Here

最后，您也必须停止动画，因此请使用requestAnimationFrame函数的兄弟，即

And in the end, you have to stop the animation too so use the brother of requestAnimationFrame function which is cancelAnimationFrame

请参见下文，我为您创建了一个演示，希望它对您有所帮助.

see below I created a demo for you hope it helps you out.

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:随机但间隔相等地对隐藏的字母进行动画处理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！