jQuery动画和循环

Question

我用jQuery在Joomla里面为一个网站制作了一些简单的动画，看起来一切都很好，但在循环过程中我遇到了一个非常奇怪的问题。甚至单元格都是固定的暗度。在循环I中，你可以在这里检查，http://db.tt/uuD00TKc，这个问题只在火狐上发生。

JS代码为：

jQuery(document).ready(function () {
function loop() {
    jQuery("#txt1").animate({
        backgroundColor: "#0089BC"
        }, 3000, function() {
        loop();
    });        
    jQuery("#txt1").animate({
        backgroundColor: "#FFF"
        }, 3000);           

    jQuery("#txt2").animate({
        backgroundColor: "#0089BC"
        }, 9000, function() {
        loop();
    });
    jQuery("#txt2").animate({
        backgroundColor: "#FFF"
        }, 9000);  

    jQuery("#txt3").animate({
        backgroundColor: "#0089BC"
        }, 6000, function() {
        loop();
    });        
    jQuery("#txt3").animate({
        backgroundColor: "#FFF"
        }, 6000);           
    }
    loop();
});

jQuery(document).ready(function () {

jQuery("#img1").hide().fadeIn(3000);
setInterval(function () {        
    jQuery("#img1").fadeOut(3000).fadeIn(3000);
}, 5000);    

jQuery("#img2").hide().fadeIn(9000);
setInterval(function () {        
    jQuery("#img2").fadeOut(9000).fadeIn(9000);
}, 5000);  

jQuery("#img3").hide().fadeIn(6000);
setInterval(function () {        
    jQuery("#img3").fadeOut(6000).fadeIn(6000);
}, 5000);      

});

HTML代码

<div id="home-mosaico">
<div class="row">
<span class="cell-img" id="img1"><img src="http://www.quatrotd.co.uk/images/home/substation-02.jpg" alt="Substation" title="Substation" /></span>
<span class="cell" id="txt1">Engineering<br />and Construction</span>
<span class="cell-img" id="img2"><img src="http://www.quatrotd.co.uk/images/home/substation-01.jpg" alt="Substation" title="Substation" /></span>
</div>
<div class="row">
<span class="cell" id="txt2">Transmission Lines</span>
<span class="cell-img" id="img3"><img src="http://www.quatrotd.co.uk/images/home/transmision_lines-01.jpg" alt="Transmision Lines" title="Transmision Lines" /></span>
<span class="cell" id="txt3">Substations</span>
</div>
</div>

CSS代码

/*** Home mosaico ***/
#home-mosaico {
display: table;
width: 940px;
height: 500px;
}
#home-mosaico .row {
display: table-row;
height: 250px; 
}
#home-mosaico .cell-img {
display: table-cell;
width: 313px;
background-color: #0089BC;
vertical-align:middle;
text-align:center;
font-size:20px;
line-height: 24px;
font-weight:normal;
color:#ffffff;
}
#home-mosaico .cell {
display: table-cell;
width: 313px;
background-color: #FFF;
vertical-align:middle;
text-align:center;
font-size:20px;
line-height: 24px;
font-weight:normal;
color:#ffffff;
}

Answer 1

您的loop函数看起来会遇到一些问题。一旦循环函数启动，它就会不断递归地调用自己，这会立即给浏览器带来很大的压力，因为调用之间甚至没有几秒钟的中断。

最重要的是，一旦任何动画完成，它们还将再次调用循环函数，从而使第一个问题更加复杂。虽然动画可能会正确堆叠(在您告诉它动画的元素上一个接一个地堆叠)，但在该循环函数中会发生大量的递归。

jQuery(document).ready(function () {
    var txt1Animate = function()
    {
        jQuery("#txt1").animate({
            backgroundColor: "#0089BC"
            }, 3000, function(){
            jQuery(this).animate({
                backgroundColor: "#FFF"
            }, 3000, txt1Animate);
        });
    }
    var txt2Animate = function()
    {
        jQuery("#txt2").animate({
            backgroundColor: "#0089BC"
            }, 9000, function(){
            jQuery(this).animate({
                backgroundColor: "#FFF"
            }, 9000, txt2Animate);
        });
    }
    var txt3Animate = function()
    {
        jQuery("#txt3").animate({
            backgroundColor: "#0089BC"
            }, 6000, function(){
            jQuery(this).animate({
                backgroundColor: "#FFF"
            }, 6000, txt3Animate);
        });
    }

    txt1Animate();
    txt2Animate();
    txt3Animate();
});

现在，这将正确地等待元素上的第一个动画完成，然后执行第二个动画，只有第二个动画完成后，它才会再次开始。

在回答问题的第二部分时，先调用fadeOut，然后直接调用fadeIn。

jQuery(document).ready(function () {

    jQuery("#img1").hide().fadeIn(3000);
    var img1Fade = function()
    {
        jQuery("#img1").fadeOut(3000).fadeIn(3000,function()
        {
            setTimeout(img1Fade,5000);
        });
    }

    jQuery("#img2").hide().fadeIn(9000);
    var img2Fade = function()
    {
        jQuery("#img2").fadeOut(9000).fadeIn(9000,function()
        {
            setTimeout(img2Fade,5000);
        });
    }

    jQuery("#img3").hide().fadeIn(6000);
    var img3Fade = function()
    {
        jQuery("#img3").fadeOut(6000).fadeIn(6000,function()
        {
            setTimeout(img3Fade,5000);
        });
    }

    img1Fade();
    img2Fade();
    img3Fade();
});

在运行setTimeout再次循环该函数之前，它会很好地等待淡入完成。

编辑

在我最初提供的代码中发现了一个错误，我使用的是jQuery的$，但是在你链接的网站上的代码中，我需要做jQuery。

Answer 2

嗯，在我看来，你可能在某个地方有一个未关闭的DIV或其他一些未关闭的标签。每个现代浏览器都试图解决这个常见的错误，但FF以一种奇怪的方式做到了这一点。让我们知道。