View Full Version : jquery animate position absolute firefox choppy

Jon W
08-05-2010, 07:10 AM
I've been working on a slideshow for my local YMCA website and all is going well all but one thing. In firefox when I animate a div that is suppose to slide up and town the animation is really stutter and choppy.

This actually kind of surprised me because this works good and clean on Internet Explorer 6-7-8, Google Chrome, Saferi, and Opera. I did some looking around on the net and this is a known bug in Firefox but I can't seem to find any fixes for it. So I came here hopping maybe I could find some help. Here is what does the magic.

var slideShowTime = 10000; //In milliseconds. 1 second = 1000
var x = 0,ssN = 0;
function slideShow() {
//Store some variable to improve performance
var infobox = $("#info-box");
var oldPicN = ssN-1;
var slideShowIMG = $("#slideShowIMG"+oldPicN);
var images = new Array();
//List of all of the images for the slide show

images[0] = "/pic1.jpg";
images[1] = "/pic2.jpg";
images[2] = "/pic3.jpg";
images[3] = "/pic4.jpg";
images[4] = "/store.jpg";
images[5] = "/aero.jpg";
images[6] = "/aero2.jpg";
images[7] = "/aero3.jpg";
//Preload the images
if(document.images) {
var preload = new Array();
for(i = 0; i < images.length; i++) {
preload[i] = new Image(400,300);
preload[i].src = "/slideShow/"+images[i];

var msgs = new Array();
msgs[0] = "Junior Clowns.";
msgs[1] = "Circus Wagon";
msgs[2] = "Rain storm on saturday.";
msgs[3] = "Clown conga.";
msgs[4] = "A computer that I was working on at the Get Right Computer store.";
msgs[5] = "My dog Aero puppy laying on the couch being lazy. Isn't she cute?";
msgs[6] = "Aero as a puppy. She is being cute there too. She just doesn't know it.";
msgs[7] = "Someone looks sleepy...";

var spanTag = document.createElement("span");
spanTag.style.cssText = 'display:none;';
spanTag.innerHTML = "<img src=\""+preload[x].src+"\" width=\"400\" height=\"300\" />";
try {

$("#slideShowIMG"+ssN).fadeIn(1000,function(){infobox.animate({opacity: 0.6, position:'absolute', bottom:'0px'},500);});
setTimeout("slideInfoBox()", slideShowTime-700);
document.getElementById('info-box').innerHTML = msgs[x];
document.getElementById('totalImages').innerHTML = x+1 +" / " + msgs.length;

(x < msgs.length-1) ? x++ : x = 0;

function slideInfoBox() {
var infobox = $("#info-box");
infobox.animate({opacity: 0, position:'absolute', bottom:'-38px'},500);

$(document).ready(function() {

I'll take any help that I can get on this.

Jon W