Reputation: 3
jQuery Animate and Loops
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 http://db.tt/uuD00TKc the issue only happens with Firefox.
The JS code is:
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 Code
<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 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;
}
Upvotes: 0
Views: 289
Answers (2)
Reputation: 4278
Your loop function looks like it will run into some problems. As soon as the loop function starts, it will keep recursively calling itself instantly putting a large strain on the browser as there isn't even a seconds break between calls.
On top of that, as soon as any of the animations are finished, they will also additionally call the loop function again compounding the first issue. While the animations may stack correctly (one after the other on the elements you told it to animate), there is a huge amount of recursion occurring in that loop function.
An alternative for the loop function but still getting the same effect (animation stacking) might be something like:
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();
});
This would now correctly wait for the first animation to finish on the element, then do the second and only once the second is complete will it start again. This stops the animation queue from spiraling out of control with 100s to 1000s of animations being queued a second.
Addressing your second part of the question, you are calling fadeOut and then straight away calling fadeIn. While this should queue that animation, that goes for 12 seconds and then you have it already being called again looped by setInterval. This would also create issues in the long term with the queue growing every 10 or so seconds without any chance of finishing.
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();
});
Similar to the other code I provided, this loops on itself in a way that won't have a huge queue of animations at once. It nicely waits for the fade in to finish before running setTimeout to loop the function again.
EDIT
Picked up one bug in the code I supplied originally, I was using $ for jQuery however in your code on the site you linked, I required to do jQuery instead.
Upvotes: 1
Reputation: 1196
Mmmh to me it looks like you might have an unclosed DIV or some other unclosed tag somewhere. Every modern browser tries to solve this common mistake but FF does it in an odd way. Let us know.
Upvotes: 0