jQuery Animate и Loops

Question

Я сделал несколько простых анимаций для сайта с jQuery внутри Joomla !, все кажется прекрасным, но во время цикла у меня очень странная проблема. Даже клетки все фиксированные dims. внутри цикла I. Вы можете проверить его здесь http://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; 
} 

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

Это теперь правильно ждать первой анимации, чтобы закончить на элементе, затем выполните второй и только один раз, когда второй будет завершен, он начнется снова. Это останавливает очередь анимации от вытеснения из-под контроля с 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, чтобы снова запрограммировать функцию.

EDIT

Взял один ошибка в коде поставляемой первоначально, я использовал $ для JQuery Однако в вашем коде на сайте вы связаны, я обязан делать jQuery вместо этого.

Answer 2

Мммм для меня это выглядит, как вы могли бы иметь незаконченный DIV или какой-либо другой незакрытый где-нибудь. Каждый современный браузер пытается решить эту распространенную ошибку, но FF делает это странным образом. Сообщите нам.