javascript - 难以创建 Jquery 循环以重复更改背景颜色和动画元素

Question

我接到了一个任务:“创建一个包含链式效果的 jQuery 函数来滑动所有在更改背景的同时反复调整页面元素。”

没问题:

1:我已经通过setInterval反复创建了幻灯片效果。

问题:

1.我无法使用 jQuery 动画效果来移动框。

$(".boxes").animate({right: '500px'}, 1000).animate({left: '500px'}, 1000);

2.我无法让 jQuery 将背景反复更改为不同的颜色。

function changecolors() {
        var colors = ["blue", "red", "green", "pink"];
        var counter = 0;
        if (counter < colors.length) {
            $("body").css("background-color", colors[counter], 1000);
            console.log("Counter: " + counter + " Colors Length: " + colors.length + " Colors: " + colors);
            counter++;
        } else {
            counter = 0;
        }

3.我的计数器不工作，不想增加。

这是一个示例链接: https://jsfiddle.net/TheWatchman/fb0mt78d/64/

Answer 1

将 var counter = 0; 移到 function changecolors() 之外。现在每次调用 changecolors() 时都会将其设置回 0。