jQuery Animate and Loops
<p>I made some simple animation for a website with jQuery inside Joomla!, all seems fine but I have a very strange issue during the loop. Even cells are all fixed dims. inside the loop I. You could check it here <a href="http://db.tt/uuD00TKc" rel="nofollow">http://db.tt/uuD00TKc</a> the issue only happens with Firefox.</p>

<p>The JS code is:</p>

<pre><code>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);      

});
</code></pre>

<p>HTML Code</p>

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

<p>CSS code</p>

<pre><code>/*** 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;
}
</code></pre>
