Javascript動畫只適用於一個方向

我試圖創建的網頁上有一個雙向滑動動畫。然而動畫只是部分工作。更精確地說，動畫片滑落了，但它只能在中途滑落。這裏是我的JavaScript：在hideLayer功能的第四行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); 
} 
}

通知，我的條件設置爲< = 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函數的條件下。但調整後，我現在不太確定。

來源

2012-06-07 Ru1138

mainbutton在演示中是不可見的，因爲它在白色背景下是白色的。另外，你正在傳遞'mainmenu'來顯示圖層並隱藏圖層，但是這兩種方法似乎都沒有使用它。 – zod

你想讓我改變主按鈕的顏色嗎？ – Ru1138

我讓這個小提琴更加清晰：http://jsfiddle.net/7egr7/我試圖找出它爲什麼不起作用。 – Mageek

它看起來像「hideLayer」將停止，如果（layerPosition < = 315）。那真的是你想要的嗎？它在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-07 12:17:23 zod

謝謝。它完美的工作！ – Ru1138

沒問題...... – zod

我不知道這是否是你想要的，但這裏是我的回答：

有邏輯的代碼中的問題。你寫

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

這意味着，如果頂部是315或更少，頂部會增加，直到它到達316，但在第一個功能，你說停止在315這樣的功能hideLayer只會讓它從1個像素移動。

解決辦法是告訴他<400而不是<=315（或高於400的東西）。

這裏是一個修改小提琴：http://jsfiddle.net/7egr7/2/

來源

2012-06-07 12:15:59 Mageek

這很奇怪。現在它正在工作，但是當我嘗試在數字沒有更改之前嘗試更改數字。但它的工作原理非常感謝你。你用我的JavaScript幫助了我很多。當我發佈我的網站時，你希望我給你一些功勞嗎？ – Ru1138

不，謝謝，但你爲什麼接受了其他答案？ – Mageek

這似乎是更好的解決。抱歉。 – Ru1138

Javascript動畫只適用於一個方向

回答

相關問題