YJ의 새벽

jQuery ( effect 메소드 ) 본문

WebFront_/jQuery

jQuery ( effect 메소드 )

YJDawn 2023. 3. 6. 19:30

 

 

 

  • Effect 메소드  ( 시각적 효과 )

-- 요소에 애니메이션 효과를 만들기 위한 메소드 집합

- $("요소명").메소드명();

- $("요소명").메소드명([speed]);

- $("요소명").메소드명([speed], [easing], [callback]);

speed  :  실행속도 (ms)   / 숫자 or slow , fast .

easing  :  변경되는 지점별 속도  /  linear , swing  

callback  :  메소드 실행 후 실행할 함수

 

  • show ()  ,   hide ()    메소드

-- 요소를 점점 커지게 하면서 화면에 나타나거나

    요소를 점점 작게 하면서 화면에서숨기는 메소드

 

  • fadeIn()    ,  fadeOut()  

-- fadeIn()  :  점점 불투명해지면서 나타남

-- fadeOut()  :  점점 투명해지면서 사라짐

 

    <style>
        .area{
            width: 300px;
            height: 200px;
            border: 1px solid black;
        }
        img{
            width: 100%;
            height: 100%;
        }
    </style>
    
        <button type="button" id="show-btn">show()</button>
    	<button type="button" id="hide-btn">hide()</button>

    	<div class="area">
        	<img id="img1" src="/4.jQuery/images/피카츄.gif">
   		</div>
        
        <button type="button" id="fadeIn-btn">fadeIn()</button>
    	<button type="button" id="fadeOut-btn">fadeOut()</button>

   		<div class="area">
        	<img id="img2" src="/4.jQuery/images/피카츄.gif">
    	</div>
       $("#show-btn").on("click",function(){
            $("#img1").show(500);
       });
       $("#hide-btn").on("click",function(){
            $("#img1").hide(500);
       });
       
       
       $("#fadeIn-btn").on("click",function(){
            $("#img2").fadeIn(500);
       });
       $("#fadeOut-btn").on("click",function(){
            $("#img2").fadeOut(500);
       });

 

Document

 

 

 

 

 

 

 

  • slide 메소드

-- slideDown()   ,  slideUp()

-- $(selector).slideUp( [speed , easing , callback] );

 

    <style>
        .divv{
            width: 300px;
            height: 30px;
            background-color: yellowgreen;
            color: orangered;
            border-radius: 10px;
            text-align: center;
            line-height: 30px;
            border: 1px solid green;
            cursor: pointer;
        }
        p.contents{
            border: 1px solid lightgray;
            width: 300px;
            height: 200px;
            display: none;    /* 화면에서 보이지않음 */
        }
    </style>
</head>
<body>
    <h2>slide 메소드</h2>
    
    <div class="divv">첫 번째 메뉴</div>
    <p class="contents">1</p>
    <div class="divv">두 번째 메뉴</div>
    <p class="contents">2</p>
    <div class="divv">세 번째 메뉴</div>
    <p class="contents">3</p>
    <div class="divv">네 번째 메뉴</div>
    <p class="contents">4</p>
    <div class="divv">다섯 번째 메뉴</div>
    <p class="contents">5</p>
        $(function(){
            $("div").on("click",function(){
                if( $(this).next("p").css("display")=="none"){

                    $(this).siblings("p.contents").slideUp();
                    $(this).next().slideDown();
                }else{
                    $(this).next().slideUp();
                }
            });
        });
Document

slide 메소드

첫 번째 메뉴

1

두 번째 메뉴

2

세 번째 메뉴

3

네 번째 메뉴

4

다섯 번째 메뉴

5

 

 

 

 

 

'WebFront_ > jQuery' 카테고리의 다른 글

jQuery ( 메소드와 이벤트 )  (0) 2023.03.06
jQuery 박스색 바꾸기 예제  (0) 2023.03.03
jQuery ( 순회(탐색) 메서드 )  (0) 2023.03.03
jQuery ( 선택자 )  (0) 2023.03.03
jQuery 란? ( onload(), read() )  (0) 2023.03.03
'WebFront_/jQuery' Related Articles more
Comments