2013-06-23 3 views
1

먼저, javascript를 사용하여 html로 탭 컨텐츠를 작성 했으므로 드롭 다운 컨텐츠로 전송합니다. 내 문제는 콘텐츠를 삭제하는 속도를 어떻게 설정할 수 있는가입니다. 이 문제를 어떻게 해결할 수 있는지 샘플이나 아이디어를 주시겠습니까? 답장을 보내 주셔서 감사합니다.드롭 다운 메뉴의 속도를 설정하는 방법은 무엇입니까?

이 내 샘플 코드 :

<body> 

<ul> 
<li><a href="#" onclick="return false; sample();">Sample</a></li> 
<p id ="cute" style = "display:none;">This is sample 1.</p> 
<li><a href="#" onclick="return false; samplex();">Sample x</a></li> 
<p id ="good" style = "display:none;">This is sample 2.</p> 
<li><a href="#" onclick="return false; samplez();">Sample z</a></li> 
<p id ="ugly" style = "display:none;">This is sample 3.</p> 
</ul> 

</body> 
</html> 

내 질문에 당신이 링크의 무엇이든을 클릭하면 드롭 다운보기의 속도를 설정하는 방법입니다 : 여기

<html> 
<head> 
<script type="text/javascript"> 
function sample(){ 
if(document.getElementById("cute").style.display=="none"){ 
document.getElementById.("cute").style.display=""; 
document.getElementById.("ugly").style.display="none"; 
    document.getElementById.("good").style.display="none"; 
} 
} 

function samplez(){ 
if(document.getElementById("good").style.display=="none"){ 
document.getElementById.("good").style.display=""; 
document.getElementById.("cute").style.display="none"; 
    document.getElementById.("ugly").style.display="none"; 
} 
} 

function samplex(){ 
if(document.getElementById("ugly").style.display=="none"){ 
document.getElementById.("ugly").style.display=""; 
document.getElementById.("cute").style.display="none"; 
    document.getElementById.("good").style.display="none"; 
} 
} 
</script> 
</head> 

몸 코드입니다.

+0

jQuery는 내장 된 애니메이션 기능을 매우 쉽게 사용할 수 있습니다. 그렇다면 순수 JS에서의 어려움에 대해 잘 알지 못합니다. – foochow

+1

Foo_Chow가 제안했듯이, jQuery는이를 위해 매우 효과적입니다. 이 코드를 사용하고 싶지 않다면 코드를 살펴보고 코드가 어떻게 실행되었는지 확인할 수 있습니다. – John

답변

0

HTML5 애니메이션은 애니메이션을 가지고 모든 1ms의가 (당신이 좋아하는 무엇을 적) CSS의 높이 값을 증가 의 setTimeout을 사용할 수 있습니다, check more 도움 또는 수 있습니다.

var dropDown = function() { 
    var ele = document.getElementById("xxx");  
    var h = ele.style.height; 
    ele.style.height = parseInt(h.substring(0, h.length-2)) + 2 + "px"; 
    setTimeout(dropDown, 1); 
}; 
setTimeout(dropDown, 1); 
+0

누군가가 setTimeout을 사용하는 방법을 여기에 게시 할 수 있습니까? 감사. : p –

+0

코드를 확인하고, setTimeout 사용법을 보여줍니다. 약간의 변경이 필요합니다. –

관련 문제