淡入淡出背景顏色變化動畫滯後和減慢

Question

我試圖通過javascript通過淡入淡出來更改背景顏色和一系列圖像。在前3-4個循環中，兩者都是同步的（每個顏色在2秒內，每個圖像在2秒內），但在某段時間後，背景顏色變化減慢並且滯後。我希望這兩個元素能夠同時同時改變。請幫忙。 FIDDLE- jsfiddle.net/pEHZR

$(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); 
}); 

Answer 1

刪除了setInterval函數，並把所有的代碼在一個地方，所以現在的動畫和文字同步：

HTML：

<div class="container"> 
    <div class="back"></div> 
    <div class="main"></div> 
</div> 

CSS：

.container { 
    position:absolute; 
    top:0px; 
    left:50%; 
    margin-left:-75px; 
    width:130px; 
    height:130px; 
    border:10px solid yellow; 
} 
.back { 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
} 
.main { 
    position:relative; 
    text-align:center; 
    color:white; 
    background-color:transparent; 
} 

JS：

$(function() { 
    var colors = ['black', 'red', 'blue', 'green', 'black']; 
    var i = 0; 
    var cont = $('div.container'); 
    var back = $('div.back'); 
    var main = $('div.main'); 
    back.css('opacity', 1); 
    back.css('backgroundColor', colors[0]); // start color , fades out 
    cont.css('backgroundColor', colors[1]); // target color 
    anim(); 

    function anim() { 
     if (i == colors.length - 1) { 
      i=0; 
      //return; // repeat ad infinitum 
     } 
     main.text(colors[i+1]); 
     var top = (cont.height() - main.height())/2 |0; 
     main.css('top', top + 'px'); //center text vertically 
     back.css({ 
      backgroundColor: colors[i], 
      opacity: 1 
     }); 
     cont.css({ 
      backgroundColor: colors[i+1] 
     }); 
     i++; 
     back.stop().animate({ 
      opacity: 0 
     }, 2000, anim); 
    } 
}); 

http://jsfiddle.net/TytSZ/10/
http://jsfiddle.net/TytSZ/12/（修改算法與透明.PNG圖像）