0

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

请注意，在 hideLayer 函数的第四行，我将条件设置为 <= 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 条件。但是在调整它之后，我现在不太确定。

4

2 回答 2

2

我不知道这是否是您想要的，但这是我的答案：

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

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

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

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

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

于 2012-06-07T12:15:59.047 回答
1

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

请注意，y 轴在屏幕下方（即顶部为零）。

单击按钮将调用 showLayer，然后调用 hideLayer。如果菜单打开（即 layerPosition > 315），showLayer 不会做任何事情（我猜这就是你想要的），并且 hideLayer 将使菜单上升 5（从 315 到 320）。在 hideLayer (layerPosition <= 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是唯一真正重要的变化。

于 2012-06-07T12:17:23.580 回答