CSS3 transform not firing in firefox with javascript event handlers and functions

Question

I've been building a gallery for a month or so now, the layout is simple, there's a thumbnail menu on the left and a gallery preview on the right. when you click a thumbnail that has loaded it fires off a mousdown event that collapses the thumbnail area and expands the gallery preview to full size (all using CSS3 transforms). so far everything works perfectly except I created an omouseover event that activates the function when you hover over a thumbnail. the function redraws the contents of the gallery preview div ("pics") and creates three images, two are the previous image in the frame, one is the next image in the frame (in the center). in the innerHTML it sets the CSS style "left:" to either 724px or -724px depending on whether it goes forwards or backwards. then when the function that generates all this html is finished, the function in charge of monitoring the switch sets the "style.left =" to "0px". all this works in safari and chrome. but for some reason firefox refuses to animate the transition! I've researched this glitch for days and came up with nothing, in a different version I can get the transition to fire at the wrong time. but all that happens in firefox is a transition-less change from 724px to 0 px. here's my code snippets.

this switches the thumbnail image and activates the function that transitions the images

document.getElementById(thumbid).onmouseover = function() {
    num = parseInt(this.name);
    this.src = image[1][num].src;
    this.style.cursor = "pointer";
    switcher(num, null);
}

this is the function that figures out how to switch the image, it sets a timer (seen in the variable below it) that accepts inputs without changing the image until the image has finished transitioning:

function switcher (num, direction) {
    if (direction == 'left') {
        num--;
    } else if (direction == 'right') {
        num++;
    }

    if (num < 0) {
        num = fullcount-1;
    } else if (num == fullcount) {
        num = 0;
    }

    if (intransit == false) {
        drawgallery(num);

        document.getElementById("photos").style.left = "0px";
        intransit = true;
        transittimer = setTimeout("intransit = false; if (transitnumber != null) { switcher(transitnumber, null); transitnumber = null; }", 450);
    } else {
        transitnumber = num;
    }

}
var transittimer = null;
var intransit = false;
var transitnumber = null;

here's the actual element that draws the gallery the start variable becomes the left variable. then afterdrawgallery function completes itself the switcher sets the div's "left" to 0px which, in every browser but firefox, transitions the transformation:

function drawgallery(num) {
    start = 724;
    if (num > curpos) {
    } else {
        start = "-"+start;
    }
    table = "<div id=\"photos\" style=\"position:absolute; height:470px; top:0px; left:"+start+"px;\">";

    //first square drawn at an X of 0 so that the image remains the same but the drawer can slide over.
    table += "<div id=\"i"+orderarr[2][curpos]+"\" style=\"overflow:hidden; position:absolute; top:0px; left:-724px; width:724px; height:470px;\">";
    if (curpos <= (totalloaded-1)) {
        table += "<img id=\"i"+curpos+"\" src=\"image.php?field=pics&id="+orderarr[2][curpos]+"\" style=\"border:none; position:relative; top:0px; left:0px;\" />";
    } else {
        table += "<div id=\"iloader"+orderarr[2][curpos]+"\" class=\"loader\" style=\"top:205px;\" ></div>";
    }
    table += "</div>";
    table += "<div id=\"i"+orderarr[2][curpos]+"\" style=\"overflow:hidden; position:absolute; top:0px; left:724px; width:724px; height:470px;\">";
    if (curpos <= (totalloaded-1)) {
        table += "<img id=\"i"+curpos+"\" src=\"image.php?field=pics&id="+orderarr[2][curpos]+"\" style=\"border:none; position:relative; top:0px; left:0px;\" />";
    } else {
        table += "<div id=\"iloader"+orderarr[2][curpos]+"\" class=\"loader\" style=\"top:205px;\" ></div>";
    }
    table += "</div>";
    /////////////////////////////

    //second square drawn at an X of either negative or positive 724 so that the image remains the same but the drawer can slide over.
    table += "<div id=\"i"+orderarr[2][num]+"\" style=\"overflow:hidden; position:absolute; top:0px; left:0px; width:724px; height:470px;\">";
    if (curpos <= (totalloaded-1)) {
        table += "<img id=\"i"+num+"\" src=\"image.php?field=pics&id="+orderarr[2][num]+"\" style=\"border:none; position:relative; top:0px; left:0px;\" />";
    } else {
        table += "<div id=\"iloader"+orderarr[2][num]+"\" class=\"loader\" style=\"top:205px;\" ></div>";
    }
    table += "</div>";
    table += "</div>";  
    document.getElementById("pics").innerHTML = table;
    curpos = num;
}

Answer 1

Try to add timeout for transitions. Timeout is the last attribute in transition property.

-moz-transition:all 1s linear 1s;

Your element should be visible at that moment, so visibility and display property should to be block and visible. You can use opacity:0 (filter:alpha(opacity=0) for ie) to make it hidden.

Suppose that will help.