0

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

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;
}
4

2 回答 2

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

现在，这将正确地等待第一个动画在元素上完成，然后执行第二个动画，只有在第二个动画完成后它才会重新开始。这可以防止动画队列因每秒有 100 到 1000 条动画排队而失控。

解决问题的第二部分，您正在打电话fadeOut，然后立即打电话fadeIn。虽然这应该对该动画进行排队，但它会持续 12 秒，然后您已经再次调用它了setInterval。从长远来看，这也会产生问题，队列每 10 秒左右就会增长一次，而没有任何完成的机会。

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。

于 2013-05-03T10:08:27.083 回答
0

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

于 2013-05-03T08:48:59.480 回答