浏览器不会渲染fadeIn和fadeOut直到动画完成

Question

我不断向fadeIn()和fadeOut文本提供一些基本代码：

function animateDonors(timeBetweenAnimation) {

    var donors = $('.donor div.comm');

    var donorsLength = donors.length;

    if(donorsLength < 2)
        return false;

    var donorsIndex = -1;

    function showNextDonor() {
        ++donorsIndex;
        donors.eq(donorsIndex % donorsLength)
            .fadeIn(1500)
            .delay(timeBetweenAnimation)
            .fadeOut(1500, showNextDonor);
    }

    showNextDonor();
}

出于某种原因，当我在浏览器中查看结果时，我看不到淡入淡出，但我可以看到文本更改。

因此，例如，如果我有2个淡入淡出的文本，我将看到Text1，然后是Text2，没有任何转换。

当我使用dev-tools查看Chrome中的元素时，似乎opacity属性确实被更改，但浏览器根本没有显示它。那是为什么？

Answer 1

如果下面的jsfiddle给你同样的问题，那么问题是你没有足够的RAM / GPU。

http://jsfiddle.net/zceKN/412/

这很简单：

$('#foo').fadeIn(1500).delay(2000).fadeOut(1500);