자바 스크립트 애니메이션은 한 방향으로 만

Question

내가 만들려고 해요 웹 페이지가에 양방향 슬라이딩 애니메이션이 작동합니다. 그러나 애니메이션은 부분적으로 만 작동합니다. 더 정확하게 말하면, 애니메이션은 위로 미끄러 져 나오지 만 중간에 만 미끄러진다. 여기 내 자바 스크립트의 다음 hideLayer 함수의 네 번째 줄에

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)와 동일한 그것을 설정하는 것은 단지를 이동하는 요소를 유발한다는 사실에 기인한다 트리거 요소를 클릭 한 후 양쪽 픽셀이 거의 없습니다.

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

그리고 여기의 스타일과 같습니다 : 여기에 내가 애니메이션에 전념 한 HTML 요소의

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

그것은 "hideLayer"처럼 보이는 경우 (layerPosition < = 315) 중지 : 여기

은 수정 된 바이올린입니다. 그게 니가 원하는거야? 그것은 1 반복 후에 발생합니다. Y 축 화면을 내려가는 것을

주 (즉 제로가 상단에).

버튼을 클릭하면 다음 showLayer 및 hideLayer를 호출합니다. 메뉴가 열려있는 경우 는 (즉 layerPosition> 315), showLayer 아무것도 (내가 그건 당신이하고자하는 것입니다 생각)하지 않을 것이며, hideLayer 메뉴 5 (315에서 320)에 의해 이동하게됩니다. hideLayer (layerPosition < = 315)의 다음 반복에서 false가되므로 아무 것도 수행하지 않습니다. 나는 일이 아무것도하기 전에 열려 있거나 닫혀 있는지 확인하고 싶습니다 html로에서

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

:

이보십시오.

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

그러나 layerPosition <= 685은 실제로 중요한 변경 사항입니다.

Answer 2

이 여기에 당신이 원하는 무엇하지만 만약 내가 모르는 내 대답이다. 당신은

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

그것은 상단이 315 이하인 경우가 316 도착하지만 첫 번째 함수에서, 당신은 315 그래서 함수 hideLayer에서 중지 그것을 말할 때까지 상단이 증가 할 것으로 의미를 썼다 1 픽셀에서 움직이면됩니다.

이 솔루션은 그에게 <400 대신 <=315 (또는 400 이상의 무언가를) 이야기하는 것입니다. http://jsfiddle.net/7egr7/2/