2014-02-24 5 views
2

페이지 상단의 메뉴를 클릭하여 자바 스크립트로 숨기거나 숨기기 해제하는 div가 4 개 있습니다. 나는이 문제를 가지고있다 :div 전환 효과 JavaScript

<script type="text/javascript"> 
    function showHide(d) { 
     var onediv = document.getElementById(d); 
     var divs= ['content1', 'content2', 'content3', 'content4']; 
     for (var i = 0; i < divs.length; i++) { 
      if (onediv != document.getElementById(divs[i])) { 
       document.getElementById(divs[i]).style.display = 'none'; 
      } 
     } 
     onediv.style.display = 'block'; 
    } 
</script> 

지금 나는 당신이 "http://www.templatemonster.com/demo/48152.html"등이 정상에서 굴러 오는 새로운 사업부를 보여줄 때 그 효과를 추가하고자합니다. JavaScript로이 작업을 수행 할 수 있습니까? 아니면 jQuery가 필요합니까? 내가 사용해야하는 jQuery를 사용해야한다면?

+3

JQuery와 자바 스크립트 라이브러리입니다. jQuery는 네이티브 JavaScript로 가능합니다. –

+0

jquery 플러그인을 사용하면 이러한 효과를 얻을 수 있습니다 http://plugins.jquery.com/tag/animation/ – jmw5598

+0

CSS 애니메이션에는 많은 JavaScript가 필요하지만 많은 경우 최신 버전으로 제한됩니다. – LGSon

답변

0

jQuery의 $show(), $hide()$toggle() 방법을 사용하여이를 수행 할 수 있습니다.

밀리 초의 매개 변수를 추가하면 지연이 발생합니다.

$toggle(500); 
0

예, jQuery를 적용 할 예정입니다. 그냥 준비 문서에 (showHide (D)) 함수를 호출

document.getElementById(divs[i]).slideUp(); 

onediv.slideDown(); 

document.getElementById(divs[i]).style.display = 'none'; 

onediv.style.display = 'block'; 

를 교체합니다.

0

안녕하세요 JQuery와이에 대한 방법을 아래로 슬라이드 사용할 수 있습니다

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
</script> 
<script> 
$(document).ready(function(){ 


$(document.getElementById(d)).slideDown(); 

}); 
</script> 
+0

안녕하세요, 저의 작품을 만들 수 없어서이 방법으로 내 메뉴에 대한 링크를 어떻게 만듭니 까? – user3276074

+0

@ user3276074 확인할 수 있도록 jsfiddle을 만들 수 있습니까? –