티스토리 뷰

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
«   2025/04   »
일 월 화 수 목 금 토
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
글 보관함