[WEB] jQuery #2 / Effect - 숨기기, 보이기, 토글, hide()

티스토리 뷰

WEB/Java BackEnd

[WEB] jQuery #2 / Effect - 숨기기, 보이기, 토글, hide()

Happyoon ~ 2021. 12. 1. 00:36

728x90

jQuery를 사용하면 여러가지 Effect들을 쉽게 구현할 수 있다.

예제를 통해 살펴보자.

예제 1

'숨기기''보이기','토글'을 구현해보자.

Step03_Effect1.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/jquery/Step03_Effect2.jsp</title>
<style>
   .box{
      width: 100px;
      height: 100px;
      border: 1px solid red;
      background-color: yellow;
      cursor: pointer;
   }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
   <button id="hideBtn">숨기기</button>
   <button id="showBtn">보이기</button>
   <button id="toggleBtn">토글</button>
   <div class="box">div1</div>
   <script>
      $("#hideBtn").on("click", function(){
         //$(".box").hide(1000);
    	 //$(".box").fadeOut(1000);
    	  $(".box").slideUp(1000);
      });
      
      $("#showBtn").on("click", function(){
         //$(".box").show(1000);
    	 //$(".box").fadeIn(1000);
    	  $(".box").slideDown(1000);
      });
      
      $("#toggleBtn").on("click", function(){
         //$(".box").toggle(1000);
    	 //$(".box").fadeToggle(1000);
    	  $(".box").slideToggle(1000);
      });
      
   </script>
</body>
</html>

'숨기기' : 숨겨짐 (이미 숨겨진 상태에서는 아무런 반응 x) => .hide(), .slideup(), .fadeOut() 등

'보이기' : 나타남 (이미 숨겨진 상태에서는 아무런 반응 x) => .show(), .fadeIn(), .slideDown() 등

'토글' : 숨겨진 상태면 나타나고, 나타나있는 상태면 숨겨짐 => .toggle(), .fadeToggle(), .slideToggle() 등

예제 2

.hide()로 div를 클릭했을 때 알림창을 띄우며 div가 사라지도록 구현해보자.

Step03_Effect2.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/jquery/Step03_Effect.jsp</title>
<style>
   .box{
      width: 100px;
      height: 100px;
      border: 1px solid red;
      background-color: yellow;
      cursor: pointer;
   }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
   <div class="box">div1</div>
   <div class="box">div2</div>
   <div class="box">div3</div>
   <div class="box">div4</div>
   <div class="box">div5</div>
   <script>
      // div 를 클릭했을때 클릭한 div 를 숨기기
      $(".box").on("click", function(){
         //$(this).css("display", "none");
         
         //$(this).hide();
         
         //$(this).hide(1000);
         
         //$(this).hide(function(){
         //   alert("뿅~");
         //});
         
         //$(this).hide(1000, function(){
         //   alert("뿅~");
         //});
         
         $(this).hide({
            duration:1000,
            complete:function(){
               alert("뿅~");
            }
         });
         
      });
   </script>
</body>
</html>

요소 클릭 시 요소 사라지고 알림창이 나타난다.

.hide() 메소드에는 오브젝트가 인자로 들어간다.

'WEB > Java BackEnd' 카테고리의 다른 글

[WEB] jQuery #4 / DateTimePicker (0)	2021.12.01
[WEB] jQuery #3 / fotorama 이미지 슬라이드 image slide (0)	2021.12.01
[WEB] jQuery #1 / chain action, EventListener (0)	2021.12.01
[WEB-jsp/servlet] Filter 사용하기 / 한글 인코딩, 로그인에 필터 사용헤보기 (0)	2021.11.30
[WEB-jsp/servlet] Forward와 Redirect의 비교 (0)	2021.11.30

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

글 보관함

yoon's Devlog

티스토리 뷰