Question

The webpage I’m trying to create has a bidirectional sliding animation on it. However the animation is only partially working. To be more precise, the animation slides up, but it only slides down partway. Here’s my JavaScript:

function showLayer() {
var hiddenLayer = document.getElementById("mainmenu");
var layerPosition = parseInt(hiddenLayer.style.top);
if (layerPosition > 315) {
    hiddenLayer.style.top = (layerPosition - 5) + "px";
    setTimeout("showLayer()", 20);
}
}

function hideLayer() {
var hiddenLayer = document.getElementById("mainmenu");
var layerPosition = parseInt(hiddenLayer.style.top);
if (layerPosition <= 315) {
    hiddenLayer.style.top = (layerPosition + 5) + "px";
    setTimeout("hideLayer()", 20);
}
}

Notice on the fourth line of the hideLayer function, I have the condition set to <= 315, this is due to the fact that setting it equal to 315 causes the element to move only a few pixels in either direction after clicking the trigger element. Here’s the HTML elements I have dedicated to the animation:

<div id="mainbutton" onclick="showLayer('mainmenu'); hideLayer('mainmenu')"></div>
<div id="mainmenu" style="position: absolute; top: 690px; left: 9px;"  
onclick="showLayer('mainmenu')">&nbsp;</div>

And here are the styles for them:

div#mainmenu { width: 600px; height: 350px; border-style: solid; background-color: 
rgb(0, 0, 0) ; border-width: 3px; border-top-right-radius: 7px; border-top-left-
radius: 7px; }
div#mainbutton { position: absolute; top: 674px; left: 12px; width: 28px; height: 
28px; border-style: solid; border-color: rgb(255, 255, 255); border-width: 1px; border-
radius: 4px; }

And the fiddle : http://jsfiddle.net/JAtLA/

I had to put some of the styles inline with the HTML because the animation wouldn’t work any other way. At first I thought the problem had solely lain in the if conditional of the hideLayer function. But after tweaking it I’m not so sure now.

Answer 1

It looks like “hideLayer” will stop if (layerPosition <= 315). Is that really what you want? It happens after 1 iteration.

Note that the y axis goes down the screen (i.e. zero is at the top).

Clicking the button will call showLayer, and then hideLayer.
If the menu is open (i.e. layerPosition > 315), showLayer will not do anything (i guess that is what you intend), and hideLayer will make the menu go up by 5 (from 315 to 320).
On the next iteration of hideLayer (layerPosition <= 315) will be false, so it will not do anything.

Try this:

var open = false;

function showLayer() {
    if (open)
        return;

    var hiddenLayer = document.getElementById("mainmenu");
    var layerPosition = parseInt(hiddenLayer.style.top);
    if (layerPosition > 315) {
        hiddenLayer.style.top = (layerPosition - 5) + "px";
        setTimeout("showLayer()", 20);
    }
    else {
        open = true;
    }
}

function hideLayer() {
    if (!open)
        return;

    var hiddenLayer = document.getElementById("mainmenu");
    var layerPosition = parseInt(hiddenLayer.style.top);
    if (layerPosition <= 685) {
        hiddenLayer.style.top = (layerPosition + 5) + "px";
        setTimeout("hideLayer()", 20);
    }
    else {
        open = false;
    }
}

In the html, I would like to check if the thing is open or closed before doing anything.

<div id="mainbutton" onclick="if (!open) { showLayer('mainmenu'); } else { hideLayer('mainmenu'); }">

but layerPosition <= 685 is the only change that really matters.