Преобразование CSS3 не запускается в firefox с обработчиками событий и функциями javascript

Я строил галерею около месяца, макет прост, слева есть меню эскизов, а справа - предварительный просмотр галереи. когда вы щелкаете по загруженной миниатюре, запускается событие mousdown, которое сворачивает область миниатюр и расширяет предварительный просмотр галереи до полного размера (все с использованием преобразований CSS3). пока все работает отлично, за исключением того, что я создал событие omouseover, которое активирует функцию при наведении курсора на миниатюру. функция перерисовывает содержимое div предварительного просмотра галереи («pics») и создает три изображения, два из которых являются предыдущим изображением в кадре, одно - следующим изображением в кадре (в центре). в innerHTML он устанавливает стиль CSS "left:" на 724px или -724px в зависимости от того, идет ли он вперед или назад. затем, когда функция, генерирующая весь этот HTML-код, завершена, функция, отвечающая за мониторинг переключателя, устанавливает для параметра «style.left =» значение «0px». все это работает в сафари и хроме. но почему то firefox отказывается анимировать переход! Я исследовал этот глюк в течение нескольких дней и ничего не придумал, в другой версии я могу заставить переход срабатывать в неподходящее время. но все, что происходит в firefox, - это изменение без перехода с 724 пикселей на 0 пикселей. вот мои фрагменты кода.

это переключает миниатюрное изображение и активирует функцию, которая перемещает изображения

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

это функция, которая выясняет, как переключать изображение, она устанавливает таймер (показанный в переменной под ним), который принимает входные данные без изменения image, пока изображение не завершит переход:

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;

вот фактический элемент, который рисует галерею, начальная переменная становится левой переменной. затем функция afterdrawgallery завершает свою работу, переключатель устанавливает "left" элемента div на 0px, что в каждом браузере, кроме firefox, выполняет преобразование:

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