🔹 jQuery - Effect

jea_i·2022년 1월 16일

jquery

jQuery

목록 보기

11/11

🔹 jQuery - Effect

낮은 수준의 시각효과
낮은 수준이란 단지 보이거나 보이지 않는 수준의 시각효과를 제공하는 기능입니다.
보임,숨김의 반복 혹은 페이드 효과, 슬라이드효과 정도를 낮은 수준 시각효과라고 한다.

🔅 Basics Effects

요소.hide([duration], [complete])

요소를 보이지 않게 하는 메서드입니다.
opacity속성, height속성을 제어하고 최종적으로 display속성의 값을 none으로 변경하게 됩니다.
hide의 매개변수로 [duration] 지속시간과 hide가 종료된 이후에 실행되는[complete]함수가 값으로 사용됩니다.

요소.show([duration], [complete])

요소를 보이게 하는 메서드입니다.
opacity속성, height속성을 제어하고 최종적으로 display속성의 값을 userAgent으로 변경하게 됩니다.
show의 매개변수로 [duration] 지속시간과 show가 완료된 이후에 실행되는[complete]함수가 값으로 사용됩니다.

요소.toggle([duration], [complete])

요소의 display속성의 값이 none이면 show를 실행하고 none이 아니면 hide를 실행하는 메서드입니다.
opacity속성, height속성을 제어하고 최종적으로 display속성의 값을 userAgent 혹은 none으로 변경하게 됩니다.
toggle의 매개변수로 [duration] 지속시간과 toggle가 완료된 이후에 실행되는[complete]함수가 값으로 사용됩니다.

🔅 Fading Effects

요소.fadeOut([duration], [complete])

요소의 display속성의 값이 none이 아닐 때 작동하는 메서드입니다.
opacity속성을 제어하고 최종적으로 display속성의 값을 none으로 변경하게 됩니다.

요소.fadeIn([duration], [complete])

요소의 display속성의 값이 none일때 작동하는 메서드입니다.
opacity속성을 제어하고 최종적으로 display속성의 값을 userAgent로 변경하게 됩니다.

요소.fadeToggle([duration], [complete])

요소의 display속성의 값이 none이 아니면 fadeOut을, none이면 fadeIn을 실행합니다.

🔅 sliding Effect

slideUp([duration], [callback])

요소의 display속성의 값이 none일 아닐때 작동하는 메서드입니다.
height속성을 제어하고 최종적으로 display속성의 값을 none로 변경하게 됩니다.

slideDown([duration], [callback])

요소의 display속성의 값이 none일때 작동하는 메서드입니다.
height속성을 제어하고 최종적으로 display속성의 값을 none로 변경하게 됩니다.

slideToggle([duration], [callback])

요소의 display속성의 값이 none이 아니면 slideUp을, 요소의 display속성의 값이 none이면 slideDown을 실행하는 메서드입니다.

<body>
<div class="effects">
        <div class="btns">
            <button class="btHide">숨김</button>
            <button class="btShow">보임</button>
            <button class="btToggle">토글</button>
        </div>
        <div class="canvas">
            <img src="img/pic04.jpg" alt="">
        </div>
</div>
</body>


<style>
$(function(){
    var $basics = $('.basics');
    //$basics.find('.btHide').click([handler]);
    $basics.find('.btHide').click(function(){
        //.hide(1000 = 1초)
        //.hide(1000, function(){} = 컴플리트함수)
        $basics.find('.canvas').hide(0, dpCheck);
    });

    $basics.find('.btShow').click(function(){
        $basics.find('.canvas').show(0, dpCheck);
    });

    $basics.find('.btToggle').click(function(){
        //지속시간 없이 (complete같은)콜백함수가 적용되면 지속시간의 기본 값은 400밀리초임
        //$basics.find('.canvas').toggle(dpCheck); = 지속시간 기본값
        $basics.find('.canvas').toggle(0, dpCheck);
    });

    function dpCheck(){
        var dp = $(this).css('display');
        console.log(dp);
    }

    var $fading = $('.fading');
    $fading.find('.btHide').click(function(){
        $fading.find('.canvas').fadeOut(1000, dpCheck)
    });
    $fading.find('.btShow').click(function(){
        $fading.find('.canvas').fadeIn(1000, dpCheck)
    });
    $fading.find('.btToggle').click(function(){
        $fading.find('.canvas').fadeToggle(1000, dpCheck)
    });

    var $sliding = $('.sliding');
    $sliding.find('.btHide').click(function(){
        $sliding.find('.canvas').slideUp(1000, dpCheck)
    });
    $sliding.find('.btShow').click(function(){
        $sliding.find('.canvas').slideDown(1000, dpCheck)
    });
    $sliding.find('.btToggle').click(function(){
        $sliding.find('.canvas').slideToggle(1000, dpCheck)
    });
});
</style>

jea_i

열정열정열정🔥

이전 포스트

🔹 jQuery - Effect

jQuery

🔹 jQuery - Effect

🔅 Basics Effects

요소.hide([duration], [complete])

요소.show([duration], [complete])

요소.toggle([duration], [complete])

🔅 Fading Effects

요소.fadeOut([duration], [complete])

요소.fadeIn([duration], [complete])

요소.fadeToggle([duration], [complete])

🔅 sliding Effect

slideUp([duration], [callback])

slideDown([duration], [callback])

slideToggle([duration], [callback])

🔹 jQuery - addClass

0개의 댓글

관련 채용 정보