Javascript 动画未运行

Question

我正在尝试创建一个上下滑动的动画菜单。不幸的是它不起作用。我检查了错误控制台，没有语法错误。这是我的 Javascript:

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

function hideLayer() {
    var hiddenLayer = document.getElementByID("mainmenu");
    hiddenLayer.style.bottom = "700px";
}

这是整个上下文:

<script type="text/javascript">
function showLayer() {
var hiddenLayer = document.getElementById("mainmenu");
var layerPosition = parseInt(hiddenLayer.style.bottom);
if (layerPosition > 700) {
hiddenLayer.style.bottom = (layerPosition + 5) + "px";
setTimeout("showLayer()", 20);
}
}
function hideLayer() {
var hiddenLayer = document.getElementByID("mainmenu");
hiddenLayer.style.bottom = "700px";
}
</script>

<style type="text/css">
div#mainmenu { position: absolute; bottom: 700px; left: 9px; 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; }
div#mainbuttontext { position: absolute; top: 679px; left: 22px; color: rgb(255, 255, 
255); font-style: normal; font-size: 18px; font-family:"Arial"; }
</style>

<div id="mainbutton"></div>
<div id="mainmenu" onClick="showLayer('mainmenu')">&nbsp;</div>
<div id="mainbuttontext">F</div>
</body>

Answer 1

我想我发现了你的问题!这是非常奇怪的事情，我无法解释，但是要在 javascript 中获取样式，css 必须是内联的(设置样式不是必需的)。

所以我通过将 css 内联来修改您的代码。

HTML :

<div id="mainmenu" style="position:absolute;bottom:100px;" onclick="showLayer('mainmenu');">Click me!</div>

<!--I wrote 100px just for the test, you can change it and modify the js-->

JS :

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

function hideLayer()
{
    var hiddenLayer=document.getElementById("mainmenu");
    hiddenLayer.style.bottom="700px";
}

fiddle : http://jsfiddle.net/8MWfV/

这是一个 fiddle ，表明非内联 css 不起作用:http://jsfiddle.net/kfUrP/