Question

我正在尝试创建的网页上有一个双向滑动动画。但是动画只是部分工作。更准确地说，动画向上滑动，但它只是向下滑动。这是我的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);
}
}

注意hide3ay函数的第四行，我将条件设置为＆lt; = 315，这是因为设置它等于315会导致元素在单击后向任一方向移动几个像素触发元素。这是我专门讨论动画的HTML元素：

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

以下是他们的风格：

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

小提琴：http://jsfiddle.net/JAtLA/

我必须将一些样式与HTML内联，因为动画不会以任何其他方式工作。起初我认为问题只是在hideLayer函数的if条件下。但在调整之后我现在不太确定了。

Answer 1

我不知道这是不是你想要的，但这是我的回答：

您的代码中存在逻辑问题。你写了

if(layerPosition<=315){ hiddenLayer.style.top = (layerPosition + 5) + "px";}

这意味着如果顶部是315或更小，顶部将增加，直到它到达316.但在第一个函数中，你说它停在315.所以函数hideLayer将让它从1像素移动

解决方案是告诉他<400而不是<=315（或高于400的事物）。

这是一个修改过的小提琴：http://jsfiddle.net/7egr7/2/

Answer 2

看起来“hideLayer”将停止if（layerPosition＆lt; = 315）。这真的是你想要的吗？它发生在1次迭代之后。

请注意，y轴向下移动到屏幕上（即零位于顶部）。

单击该按钮将调用showLayer，然后调用hideLayer。如果菜单是打开的（即layerPosition> 315），showLayer将不会做任何事情（我想这就是你想要的），而hideLayer将使菜单上升5（从315到320）。在hideLayer的下一次迭代（layerPosition＆lt; = 315）将为false，因此它不会做任何事情。

试试这个：

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

在html中，我想在做任何事之前检查这个东西是打开还是关闭。

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

但layerPosition <= 685是唯一真正重要的变化。

Javascript动画只能在一个方向上运行

2 个答案: