How to prevent Firefox rendering during a function

[Nietecht]

Hello,

I'm making some sort of sliding menu for a site.
The effect involves having 2 slide effects at the same time. One to close a menu section and one to open a menu section, giving the impression the opening one slides over the closing one.
I have an interval repeating a function that reduces the height of the closing section until it's 0 and increases the height of the opening section to until its max height.
They both get increased and decreased with the same amount, so the result should be nice flowing slide.
This works just fine in all browsers I tested (IE/Safari/Opera/Mozzila) except Firefox.
The code executes correctly, but the problem lies in Firefox rendering the changes after each altering statement instead of rendering the result after the function (like all other browsers seem to do).
So, in my code, if I first increase the height of the closing section and then decrease the height of the opening one, Firefox will first show an increase of total height and then immediately thereafter a decrease, resulting in a very choppy animation.

My question: is there any way to prevent Firefox from rendering the changes I make within the same function after each statement and wait until the function has resolved, rendering the result, like other browsers?

Here is the testing function I use, if it's any use. You'll see how it all happens within the same function. I even tried having the code arranged so that both altering statements were right next to each other, but that didn't help.

    window.onload = function () {    
        var timer;
        var menuFrom = $("zoekerMenu");
        var menuTo = $("shopMenu");
        var menuToHeight = fGetDimensions(menuTo)[1];
        
        function fSlideMenu() {
            var step = 20;
            var to = true;
            var from = true
                       
            if (menuTo.offsetHeight + step < menuToHeight) {
                menuTo.style.height = (menuTo.offsetHeight + step) + "px";
            } else {
                menuTo.style.height = menuToHeight + "px";
                to = false;
            }
            
            if (menuFrom.offsetHeight - step > 0) {
                menuFrom.style.height = (menuFrom.offsetHeight - step) + "px";
            } else {
                menuFrom.style.display = "none";
                from = false;
            }
            
            if (!to && !from) {
                clearInterval(timer);
            }
        }
        
        menuTo.style.overflow = "hidden";
        menuFrom.style.overflow = "hidden";
        menuTo.style.height = "0px";
        menuTo.style.display = "";
        
        timer = setInterval(fSlideMenu, 20);
    }

 

[Nietecht]

I was doing some hopeless messing around to analyse the problem when I noticed that suddenly Firefox was actually not rendering the changes during the functions anymore, hooray!
Stripping out all the test code that didn't induce this behaviour, the magic seemed to be done by adding this line of code in the right places:

(menuTo.offsetHeight);

Yes, just "(menuTo.offsetHeight);". I put it before my "if(!to && !from)" check in the fSlideMenu function and also before setting the interval.
Placing the line in other places like after the variable declarations of the fSlideMenu function results in errors or having no effect.

I've got no clue as to what or why or how, but it works and that's good enough for me now.