[ETC] jQuery 숨기기와 보이기

|

기본효과

show() 문서객체를 크게 하며 보여줌

hide() 문서객체를 작게 하면 사라짐

toggle() show() hide() 번갈아 실행

slideDown() 슬라이드 효과와 함께 보여줌

slideUp() 슬라이드 효과와 함께 사라지게 함

slideToggle() slideDown() slideUp() 번갈아 실행

fadeIn() 선명하게 보여줌

fadeOut() 흐리게 하며 사라지게 함

fadeToggle() fadeIn() fadeOut() 번갈아 실행


사용방법으로는

$(선택자).method();

$(선택자).method(speed);

$(선택자).method(speed,callback);

$(선택자).method(speed,easing,callback);

speed 속도 - slow,normal,fast

callback 효과완료후 실행할 함수

easing 애니메이션 - linear swing

- 소스 -

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<script src="http://code.jquery.com/jquery-1.7.js"></script>

<script src="http://code.jquery.com/jquery-1.7.min.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<script src="http://ajax.aspnetcdn.com/ajax/jQuery-1.7.js"></script>

<script src="http://ajax.aspnetcdn.com/ajax/jQuery-1.7.min.js"></script>

<script src="jquery-1.7.2.min.js"></script>

 

<script type="text/javascript">

$(document).ready(function(){

$('h1').click(function(){

$(this).next().toggle('slow',function(){

alert('효과');

});

});

});

</script>

 

<script type = "text/javascript">
  $(document).ready(function(){
   //slow를 3초로 지정
   jQuery.fx.speeds.slow = 3000;
   
   //hide()
   $("#hide1").click(function(){
    $("#hidediv1").hide();
   });
   
   //hide 인자 값으로 speed, callback함수 지정
   $("#hide2").click(function(){
    $("#hidediv2").hide("slow",function(){
     alert("경고: speed 값을 주면 천천히 사라집니다.");
    });
   });
   
   //show()
   $("#show1").click(function(){
    $("#showdiv1").show();
   });
   
   //show 인자 값으로 speed, callback함수 지정
   $("#show2").click(function(){
    $("#showdiv2").show("slow",function(){
     alert("경고: speed 값을 주면 천천히 보여집니다.");
    });
   });
   
   //toggle 코드
   $("#toggle1").click(function(){
    $("#togglediv1").toggle();
   });
   
   //toggle 인자 값으로 speed, callback함수 지정
   $("#toggle2").click(function(){
    $("#togglediv2").toggle("slow",function(){
     alert("경고: speed 값을 주면 천천히 보여집니다.");
    });
   });
  });
</script>

 

</head>

<body>

<h1>열고 닫기</h1>

<div>

<h1>제목1</h1>

<p>내용입니다.</p>

</div>

<h1>열고 닫기</h1>

<div>

<h1>제목2</h1>

<p>내용입니다.</p>

</div>

<h1>열고 닫기</h1>

<div>

<h1>제목3</h1>

<p>내용입니다.</p>

</div>

 


<h1> hide()예제 </h1>
<button id = "hide1"> hide() </button>
<div id = "hidediv1" sttyle = "display:block; border:1px solid #cccccc; width:300px; height:200px;">
  이 부분이 사라집니다.
</div>

<h1> hide(speed, callback)예제 </h1>
<button id = "hide2"> hide(speed, callback) </button>
<div id = "hidediv2" sttyle = "display:block; border:1px solid #cccccc; width:300px; height:200px;">
  이 부분이 애니메이션 표현에 의해 사라집니다.
</div>

<h1> show()예제 </h1>
<button id = "show1"> show() </button>
<div id = "showdiv1" sttyle = "display:block; border:1px solid #cccccc; width:300px; height:200px;">
  이 부분이 보여집니다.
</div>

<h1> show(speed, callback)예제 </h1>
<button id = "show2"> show(speed, callback) </button>
<div id = "showdiv2" sttyle = "display:block; border:1px solid #cccccc; width:300px; height:200px;">
  이 부분이 애니메이션 표현에 의해 보여집니다.
</div>

<h1> toggle()예제 </h1>
<button id = "toggle1"> toggle() </button>
<div id = "togglediv1" sttyle = "display:block; border:1px solid #cccccc; width:300px; height:200px;">
  이 부분이 toggle 됩니다.
</div>

<h1> toggle(speed, callback)예제 </h1>
<button id = "toggle2"> toggle(speed, callback) </button>
<div id = "togglediv2" sttyle = "display:block; border:1px solid #cccccc; width:300px; height:200px;">
  이 부분이 애니메이션 표현에 의해 toggle 됩니다.
</div>

 

</body>

</html>

 

Trackback 0 And Comment 0
prev | 1 | ··· | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | ··· | 162 | next