Question

我正在处理我的投资组合，并且我想添加动画箭头以邀请用户向下滚动。箭头将由2个方块+箭头组成，我想为它们制作动画如下：第一个元素出现，然后是第二个元素（第一个淡出时），然后是第三个元素（第一个元素再次出现，第二个元素淡出）。我尝试了很多类似这样的脚本（仅限2个元素）：

function test() {
        for (var i = 1; i < 11; i = i + 1) {
            if (i % 2 !== 0) {
                document.getElementById('square1').style.visibility = 'visible';
                document.getElementById('square2').style.visibility = 'hidden';

            } else {
                document.getElementById('square1').style.visibility = 'hidden';
                document.getElementById('square2').style.visibility = 'visible';
            };
        };
    }

这只会使元素在浏览器中可见，我以为广场是＆＃39; blinkink＆＃39;因为循环计算真的很快而太快而无法被注意到所以我试图添加一个睡眠功能，但它也没有用。

有人可以帮我这个吗？作为一个奖励问题，我可以在网站加载时运行该功能，但如果用户向下滚动到网站的已定义部分时动画可能会更好！

P.S：我没有使用jQuery，我想在使用框架之前挖掘Js。

谢谢！抱歉我的英语：）

编辑：我终于有了一个动画功能来动画3个元素。我有点挣扎，但最后，感谢你的帮助，感谢您提供的示例和链接这是代码，如果它对任何人感兴趣，我认为它可能需要一些重构，但无论如何我都很高兴：

    function appear() {
        alert(container[test]);
        document.getElementById(container[test]).style.visibility = 'visible';
        if(test === 0) {
          document.getElementById(container[test + 1]).style.visibility = 'hidden';
          document.getElementById(container[test + 2]).style.visibility = 'hidden';
          test++
        } else if(test === 1) {
          document.getElementById(container[test - 1]).style.visibility = 'hidden';
          document.getElementById(container[test + 1]).style.visibility = 'hidden';
          test++
        } else {
          document.getElementById(container[test - 1]).style.visibility = 'hidden';
          document.getElementById(container[test - 2]).style.visibility = 'hidden';
          test = 0;
        }

    }

    function animate() {
        var interval = setInterval(appear, 1000);
    }

    var test = 0;
    var sq1 = 'square1';
    var sq2 = 'square2';
    var arrow = 'arrow';
    var container = [sq1, sq2, arrow];

    alert('test' + container);

    animate();

Answer 1

我说这最适合使用动画图片或CSS动画，而不是使用JavaScript动画的一系列元素。因此，我将包含一个CSS示例，还包括您要求的JavaScript示例。

这里是CSS示例，CSS上的this article技巧讨论了CSS动画的工作原理（我不是专家）;请注意，我们为opacity而不是visibility制作动画，CSS为我们提供了一个很好的缓和效果（还有其他）：

＆＃13;

@keyframes pulse {
  0% {opacity: 1}
  50% {opacity: 0}
}
.blocks {
  background-color: blue;
  width: 20px;
  height: 20px;
  display: inline-block;
  opacity: 0;
}
.block1 {
  animation: pulse 2.4s ease 0s infinite;
}
.block2 {
  animation: pulse 2.4s ease 0.8s infinite;
}
.block3 {
  animation: pulse 2.4s ease 1.6s infinite;
}

＆＃13;

<div class="blocks block1"></div>
<div class="blocks block2"></div>
<div class="blocks block3"></div>

＆＃13;

但是如果你想使用JavaScript动画的元素：你发布的代码的问题是它永远不会回流到浏览器以允许它更新显示。因此，您需要使用setTimeout来更改元素的可见性（请参阅注释），而不是循环：

＆＃13;

// Get the blocks
var blocks = document.querySelectorAll(".blocks");

// Keep track of which block we're currently showing
var index = -1;

// Start
cycle();
function cycle() {
  // Get the current block if any
  var block = index >= 0 && blocks[index];
  if (block) {
    // Hide it again
    block.style.visibility = "hidden";
  }
  
  // Move to the next block, wrapping around when we get to the end
  index = (index + 1) % blocks.length;
  
  // Show it
  block = blocks[index];
  block.style.visibility = "visible";
  
  // Call this function again in 800ms
  setTimeout(cycle, 800);
}

＆＃13;

.blocks {
  background-color: blue;
  width: 20px;
  height: 20px;
  display: inline-block;
  visibility: hidden;
}

＆＃13;

<div class="blocks block1"></div>
<div class="blocks block2"></div>
<div class="blocks block3"></div>

＆＃13;

Answer 2

您可以使用setInterval方法执行此操作： -

var interval=500,i=0;
setInterval(function(){
  i++;
   if (i % 2 !== 0) {
     document.getElementById('square1').style.visibility = 'visible';
     document.getElementById('square2').style.visibility = 'hidden';

   } else {
     document.getElementById('square1').style.visibility = 'hidden';
     document.getElementById('square2').style.visibility = 'visible';
   }
},interval);

如果您希望它在到达页面上的某个点后激活，请使用if构造来验证页面的scrollTop： -

if(document.body.scrollTop>=500){
  ...
  //do some stuff
}

Answer 3

您可以使用toggle（）函数。这改变了隐藏和可见之间的css属性。或者，您也可以使用hide（）和show（）函数。要解决滚动属性，还可以执行以下操作：

var y = $('.selector').scrollTop(); //gives you the vertical scroll position
if(y%30 == 0) {
$('.arrowOne').toggle();
$('.arrowTwo').toggle();
}

这将为每次滚动更改30切换箭头。

如何让一个html元素出现并与Js一次又一次地消失？

3 个答案: