Javascript 淡入背景颜色更改动画会延迟并减慢

我正试图通过javascript通过交叉淡入来改变背景色和一系列图像。在前3-4个循环中，两个循环都是同步的（每种颜色在2秒钟内，每幅图像在2秒钟内），但在一段时间后，背景颜色的变化变慢和滞后。我希望两个元素同时改变。请帮忙

---

删除了setInterval函数并将所有代码放在一个位置，因此现在动画和文本已同步：

HTML:

CSS:

.container{
位置：绝对位置；
顶部：0px；
左：50%；
左边距：-75px；
宽度：130px；
高度：130像素；
边框：10px实心黄色；
}
.回来{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
}
梅因先生{
位置：相对位置；
文本对齐：居中；
颜色：白色；
背景色：透明；
}

JS:

$（函数（）{
var colors=['黑色'、'红色'、'蓝色'、'绿色'、'黑色']；
var i=0；
var cont=$（'div.container'）；
var back=$（'div.back'）；
var main=$（'div.main'）；
back.css（'opacity'，1）；
css（'backgroundColor'，colors[0]）；//开始颜色，淡出
cont.css（'backgroundColor'，colors[1]）；//目标颜色
动漫（）；
函数anim（）{
if（i==colors.length-1）{
i=0；
//return；//无限重复
}
main.text（颜色[i+1]）；
var top=（cont.height（）-main.height（））/2 | 0；
main.css（'top'，top+'px'）；//垂直居中文本
back.css({
背景颜色：颜色[i]，
不透明度：1
});
续({
背景颜色：颜色[i+1]
});
i++；
back.stop（）.设置动画({
不透明度：0
}，2000年，动画片）；
}
});

（使用透明.png图像的改进算法）

$(function () {
var colors = ['black', 'red', 'blue', 'black'];
var i = 0;
var cont = $('div.container');
var back = $('div.back');
back.css('opacity', 1);
back.css('backgroundColor', colors[0]);
cont.css('backgroundColor', colors[1]);

window.onload = function start() {
    setInterval(function () {
        anim();
    }, 2000);
}

function anim() {
    if (i == colors.length - 1) {
        i = 0;
        return;
    }
    back.css({
        backgroundColor: colors[i],
        opacity: 1
    });
    cont.css({
        backgroundColor: colors[i + 1]
    });
    i++;
    back.stop().animate({
        opacity: 0
    }, 2000, anim);
}
});

$(function () {
$('.fadein img:gt(0)').hide();
setInterval(function () {
    $('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');
}, 2000);
});