Javascript动画未运行

我正在尝试创建一个上下滑动的动画菜单。不幸的是，它不起作用。我已经检查了错误控制台，没有语法错误。以下是我的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>

函数showLayer（）{
var hiddenLayer=document.getElementById（“主菜单”）；
var layerPosition=parseInt（hiddenLayer.style.bottom）；
如果（图层位置>700）{
hiddenLayer.style.bottom=（layerPosition+5）+“px”；
setTimeout（“showLayer（）”，20）；
}
}
函数hideLayer（）{
var hiddenLayer=document.getElementByID（“主菜单”）；
hiddenLayer.style.bottom=“700px”；
}
div#主菜单{位置：绝对；底部：700px；左侧：9px；宽度：600px；
高度：350px；边框样式：纯色；背景色：rgb（0,0,0）；边框-
宽度：3px；边框右上半径：7px；边框左上半径：7px；}
div#main按钮{位置：绝对；顶部：674px；左侧：12px；宽度：28px；
高度：28px；边框样式：实心；边框颜色：rgb（255、255、255）；边框宽度：
1px；边界半径：4px；}
div#mainbuttonext{位置：绝对；顶部：679px；左侧：22px；颜色：rgb（255255，
255）；字体样式：普通；字体大小：18px；字体系列：“Arial”；}
F

我想我发现了你的问题！这很奇怪，我无法解释，但要在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-->

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

小提琴：

---

这里有一个例子表明非内联css不起作用：

您是否尝试过

var layerPosition=parseInt（window.getComputedStyle（hiddenLayer，null）.bottom，10）？没有。我现在就试试。首先，你能给我们你的css吗？其次，您在函数
hideLayer
中编写了
getElementByID（“主菜单”）
，而不是
getElementByID（“主菜单”）
。看看ID. D。第三，尝试编写<代码> OnCase<代码>，而不是<代码> OnCase< /Cord>（我不确定，但它可能会影响）。考虑使用JS使其更可读。看起来我的位置有问题。等我把事情搞定后再打给你。