jQuery 12. 시각적인 효과 메소드

시각적인 효과와 관련된 메소드 (Effect 메소드)

: 페이지 내에 애니메이션 효과를 주기위해 사용되는 메소드 집합

 

 

 show(), hide(), toggle()

: 특정요소가 점점 커지면서 보여지거나(show), 작아지면서 사라지게(hide) 하는 메소드 
  toggle()->둘다 / 메소드 호출시  ms단위로 시간을 전달하면서 호출

<button id="hide">숨기기</button>
<button id="show">보여주기</button>
<button id="toggle">토글</button>

<br><br>
<img src=https://blogpfthumb-phinf.pstatic.net/MjAyMTEyMjBfMjU0/MDAxNjM5OTczNDQxMDE4.UGBq7jO_4meHlXr3THdy9NrQlMP9i0PQVwUTbHadH0Yg.vKbtN5uQa5rOOtpmUu9fnlHgbzqgmACVToIerOrvOa4g.JPEG.gksqlcdl93/KakaoTalk_20211220_123204109_05.jpg?type=w161 id="img">

<script>
	$(function(){
    	$("#hide").click(function(){
        	$("#img").hide(3000);
        })
        $("#show").click(function(){
        	$("#img").show(3000);
        })
        $("#toggle").click(function(){
        	$("img").toggle(3000);
        })
    })
</script>

 

fadeIn(), fadeOut(), fadeToggle()

특정요소가 점점 투명해지면서 사라지고 (fadeOut), 선명해지면서 보여지게(fadeIn) 하는 메소드 
fadeToggle ()-> 둘다 / 메소드 호출시  ms단위로 시간을 전달하면서 호출

<button onclick="test1()">숨기기</button>
<button onclick="test2()">보여주기</button>
<button onclick="test3()">토글</button>
<br>
<img src=https://blogpfthumb-phinf.pstatic.net/MjAyMTEyMjBfMjU0/MDAxNjM5OTczNDQxMDE4.UGBq7jO_4meHlXr3THdy9NrQlMP9i0PQVwUTbHadH0Yg.vKbtN5uQa5rOOtpmUu9fnlHgbzqgmACVToIerOrvOa4g.JPEG.gksqlcdl93/KakaoTalk_20211220_123204109_05.jpg?type=w161 id="img2">

<script>
	function test1(){
    	$("#img2").fadeOut(3000);
    }
    function test2(){
    	$("#img2").fadeIn(3000);
    }
    function test3(){
    	$("#img2").fadeToggle(3000);
    }

</script>

 

slideDown(), slideUp()

: 특정요소가 슬라이드형식으로 사라지거나(slideUp) 보여지게(slideDown) 하는 메소드 

예시) Q&A 페이지

>>css

<style>
        .div{
            background-color: beige;
            border:1px solid tan;
            width: 300px;
            height: 30px;
            line-height: 30px; /*height값과 똑같이 쓰면 중간으로옴*/
            text-align: center;
            border-radius: 10px;
            cursor: pointer; /*클릭이 될것처럼 마우스 커서변경*/
        }

        .p{
            box-sizing: border-box;
            border:1px solid lightgray;
            width: 300px;
            height: 100px;
            margin-top: 5px; /*p요소 자체가 마진가지고있음 */
            padding: 10px;
            border-radius: 10px;
            display: none;
        }
    </style>

 

    <div>Q. 반품언제되나요?</div>
    <p>A. 지금 확인중입니다.</p>
    
    <div>Q. 상품 위치를 알고 싶습니다.</div>
    <p>A. 배송 조회해보세요. 거기 다 나와요</p>
    
    <div>Q. 이 사이즈 있나요?</div>
    <p>A. 네 있어요 ^_^</p>
    
    <div>Q. 판매자가 연락이 안됩니다.</div>
    <p>A. 신고하세요;</p>
    
    <div>Q. 연락가능한 시간을 알려주세요</div>
    <p>A. 플러스 친구 이용하시면 24시간 이내에 답변드리겠습니다. </p>
     <script>
        $(function(){
            $("div").click(function(){
                const $p = $(this).next(); 

                if($p.css("display")=="none"){ // 사라져있는 상태일경우
					  //기존에 열려있는 모든 p요소 사라지게 하기
                    $(this).siblings("p").slideUp(); //sibling() :선택된 요소와 같은 레벨에 있는 모든 요소 다 선택  

                    $p.slideDown(); //보여지게

                }else{
                    $p.slideUp(); // 사라지게
                }
                
            })
        })
    </script>

Q. 반품언제되나요?

A. 지금 확인중입니다.

Q. 상품 위치를 알고 싶습니다.

A. 배송 조회해보세요. 거기 다 나와요

Q. 이 사이즈 있나요?

A. 네 있어요 ^_^

Q. 판매자가 연락이 안됩니다.

A. 신고하세요;

Q. 연락가능한 시간을 알려주세요

A. 플러스 친구 이용하시면 24시간 이내에 답변드리겠습니다.