javascript - 试图让函数与 window.onload 循环但不工作

Question

我在这里有这个 JavaScript/jQuery 动画函数，我希望它为每次3000using循环window.onload = function(){}，但由于某种原因它不起作用。我认为它可能是语法/基础错误，因为我是 javascript 新手，但如果我应该使用不同的方法，请告诉我。这是我的代码：

function animTile(){
    $(".main-content").delay(3000).animate({
        top: "100%"
    });

    $(".secondary-content").delay(3000).animate({
        top: "0"
    });
}

window.onload = function(){
    animTile(); setInterval(animTile, 3000);
}

编辑：

也许这也有帮助。这是我的 CSS 代码：

    #wrap {
        display: block;
        height: 328px;
        width: 568px;
        overflow: hidden;
    }

    #wrap .main-content {
        display: block;
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0%;
    }

    #wrap .secondary-content {
        display: block;
        height: 100%;
        width: 100%;
        position: absolute;
        top: 100%;
    }

Answer 1

尝试这样的事情：

 function animTile(){
$(".main-content").delay(3000).animate({
    top: "100%"
});

$(".secondary-content").delay(3000).animate({
    top: "0"
});
 animTileTwo();
}

function animTileTwo(){
$(".main-content").delay(3000).animate({
    top: "0"
});

$(".secondary-content").delay(3000).animate({
    top: "100%"
});
}


  window.onload=function(){
     setInterval("animTile()", 3000);
 } 

Answer 2

试试这个：

function animTile(){
$(".main-content").animate({
    top: "100%"
}, 1000);

$(".secondary-content").animate({
    top: "0"
}, 1000);
setTimeout('animTile()', 3000);
}

window.onload = function(){
animTile();
}

Answer 3

为什么你使用'延迟'功能？你想要什么？你说你想要一些循环动画，但在你的代码中，我只为每个元素找到了一个状态。我的意思是，如果你想要一个循环动画，你应该将一些属性设置为值 A，然后将其设置为值 B，然后再将其设置回值 A……这是一个循环。

所以，我猜你想将“top”属性设置为“100%”，3000 毫秒后，将其设置为 0，3000 毫秒后，将其设置为“100%”。是对的吗？

如果这是您想要的，请尝试以下代码：

    function toggle() {
        var elem = $('#id');
        if (elem.css('top') == '700px') {
            elem.animate({
                top: "0"
            });
        } else {
            elem.animate({
                top: "700px"
            });
        }
    }
    toggle();
    setInterval(toggle, 3000);