Question

我有三个黄色条，每个都需要从左到右。为此，我已经生成了这个代码，但它只适用于最后一个代码。任何人都可以更正此代码;我需要使用纯JavaScript。我没有使用任何框架。感谢。

window.onload = function(){  

    var yellowTitles = document.getElementById('magazine-brief').getElementsByTagName('h2');

    for(i=0; i< yellowTitles.length; i++) {
        var header = yellowTitles[i];
        var timer = i*500;
        var yellowBar = setTimeout(animeYellowBar,timer);

        function animeYellowBar(){
           header.style.left= "0";
        }

    }

}

Answer 1

以下是我如何解决问题：

var yellows = document.getElementById('magazine-brief').getElementsByTagName('h2');

// this will force the header number to be bound correctly
// also animates the div across the page by tracking the current position of x
function createMotion(num){
  var currPos = 0;//current x position
  var delta = 10;//move by this amount
  setInterval(function(){
    currPos += delta
    yellows[num].style.left = currPos;
  }, num * 500);
}

for (var i = 1; i < yellows.length; i++)
{
  createMotion(i);
}

注意函数“createMotion” - 添加所以数字“i”在setInterval函数中是正确引用。

Answer 2

你不应该增加你的CSS左值而不是只是设置为0吗？如果您只是设置值而不逐渐递增或递减，为什么会有超时？

如果您确实想要使用渐进式动画，请查看本教程：http://www.schillmania.com/content/projects/javascript-animation-1/

非常具有描述性，可能是您想要的。

Answer 3

var yellows = document.getElementById('magazine-brief').getElementsByTagName('h2');

for (var i = 0; i < yellows.length; i++)
{
    (function(idx, el){
        window.setTimeout(function(){
            var interval = window.setInterval(function(){
               el.style.left = parseInt(el.style.left) + 10; // adjust this movement step
               if (parseInt(el.style.left) >= 0)
               {
                   el.style.left = 0;
                   window.clearInterval(interval);
               }
            }, 100); // adjust this number for animation speed
        }, (idx++) * 500);
    })(i, yellows[i]);
}

Answer 4

当你的超时功能运行时，header指的是你的上一个h2。

尝试编辑超时功能：

function animeYellowBar(){
       var thisheader=header;
       thisheader.style.left= "0";
    }

动画上的JavaScript setTimeout（）方法

4 个答案: