Question

我有两个问题。

为什么让字母随机消失的动画对所有字母的速度都不一样？动画不流畅。
如何让动画在另一边？当我用.hide（）隐藏div时，我试图让它看起来不透明，这不会起作用。我已经尝试了不同的解决方案，但实际上没有什么能让div出现。

代码：

＆＃13;

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);

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

问题

脚本中的问题包括一个主要错误，即您生成随机数而不知道生成的数字将用于选择span并隐藏它并且它需要是有效索引，实际上它会继续生成可能出现两次的数字，在这种情况下，它会尝试再次隐藏隐藏的字母，并且尝试查找有效索引的等待时间也会在某个时间内隐藏，但需要更少的时间或者有时更多。这就是隐藏时间不一样的真正原因。

其次，你只是在运行动画，就是它没有停止连续运行的脚本并加载你的浏览器以及setInterrval()，即使它只是你自己的浏览器也不知道最小化或切换切换，一旦隐藏所有跨距，您需要停止它。

怎么做

选择您要隐藏的元素。
在var elemArray

.toArray()

开始生成随机数并验证它是否是elemArray的有效索引，如果不是递归调用它，直到找到范围[0 - elemArray.length]之间的有效索引。
当您发现有效索引隐藏该索引上的元素并使用splice以elemArray方式从该requestAnimationFrame中删除该元素时，您将隐藏每个元素一次并进入随机序列
现在关于动画，问问requestAnimationFrame()

requestAnimationFrame功能，允许您在JavaScript中创建流畅和流畅的动画，而不必担心使其流畅和流畅。只需向requestAnimationFrame添加几个电话，您的浏览器就可以完成其余的工作。而已。它还有助于控制诸如笔记本电脑/手机/平板电脑进入电池模式等因素并将其性能降低一半。诸如另一个选项卡关注的因素。阅读更多 Here
最后，你必须停止动画，所以请使用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); } <{3}}

.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>

 materialCalendarView.setSelectionMode(MaterialCalendarView.SELECTION_MODE_MULTIPLE);
    materialCalendarView.setCurrentDate(today);
    materialCalendarView.state().edit()
            .setMinimumDate(CalendarDay.from(today))
            .setMaximumDate(CalendarDay.from(calendar))
            .setCalendarDisplayMode(CalendarMode.MONTHS)
            .commit();

 materialCalendarView.setOnDateChangedListener(new OnDateSelectedListener()
    {
        @Override
        public void onDateSelected(@NonNull final MaterialCalendarView widget, @NonNull final CalendarDay date, final boolean selected) {


            for(int i=0;i<widget.getSelectedDates().size();i++)
            {

                my_Dates1.add(date.getDay());

            }

            Log.e("Datess", String.valueOf(my_Dates1));


        }
    });

Highcharts.chart('container', {

    title: {
        text: 'Solar Employment Growth by Sector, 2010-2016'
    },

    subtitle: {
        text: 'Source: thesolarfoundation.com'
    },
........
.....
....

    tooltip: {
      formatter: function() {
        return '<strong>X value: </strong>'+ this.x;
      }
    },
});

Answer 2

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

Answer 3

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

<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>

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

3 个答案:

问题

怎么做