jQuery effect 이펙트 효과의 제어

---

이펙트 효과의 지연 설정

.delay() 메서드는 실행 중인 큐 안에서 연속적으로 실행되는 이펙트 효과 사이의 지연 시간을 설정

// 페이드 아웃 효과와 페이드 인 효과 사이에 1초의 지연시간을 설정하는 예제
$(function() {
    $("#startBtn").on("click", function() {
        // id가 "divBox"인 요소를 0.5초에 걸쳐 사라지게 하고
        // 1초의 지연시간 뒤에 다시 2초에 걸쳐 나타나게 함.
        $("#divBox").fadeOut(500).delay(1000).fadeIn(2000);
    });
});

이펙트 효과의 중지

• 제이쿼리에서는 .stop() 메서드와 .finish() 메서드를 사용하여 실행 중인 이펙트 효과를 중지
• .stop() : 선택한 요소에서 실행 중인 모든 이펙트 효과를 즉시 중지
• .finish() : 거기에 더해서 선택한 요소가 포함된 큐까지 제거하여 모든 이펙트 효과를 전부 종료

$(function() {
    $("#toggleBtn").on("click", function() {
        // id가 "divBox"인 요소를 2초에 걸쳐 올라가면서 사라지거나 내려오면서 나타나게 함.
        $("#divBox").slideToggle(2000);
    });

    $("#stopBtn").on("click", function() {
        // id가 "divBox"인 요소에서 실행 중인 모든 이펙트 효과를 즉시 중지시킴.
        $("#divBox").stop();
    });

    $("#finishBtn").on("click", function() {
        // id가 "divBox"인 요소에서 실행 중인 모든 이펙트 효과를 즉시 중지시키고, 그 큐까지 모두 제거함.
        $("#divBox").finish();
    });
});

jQuery.fx 객체

제이쿼리의 jQuery.fx 객체는 이펙트 효과가 구현되는 방법을 제어하는 다양한 프로퍼티를 구성 

 

jQuery.fx.speeds 프로퍼티
jQuery.fx 객체의 speeds 프로퍼티는 "slow", "normal", "fast" 값을 가지고 이펙트 효과의 속도를 나타냄

 

제이쿼리에서 제공하는 jQuery.fx.speed 프로퍼티의 기본값

• 프로퍼티 값 밀리초(milisecond)
• fast 200
• normal 400
• slow 600
• 이러한 속도의 기본값을 speeds 프로퍼티를 이용하여 변경 가능

$(function() {
    $("#toggleBtn").on("click", function() {

        // id가 "divBox"인 요소를 빠르게(0.2초에 걸쳐) 올라가면서 사라지거나 내려오면서 나타나게 함.
        $("#divBox").slideToggle("fast");
    });

    $("#setBtn").on("click", function() {

        // jQuery.fx 객체의 speeds 프로퍼티의 fast의 기본값을 1초로 변경함.
        jQuery.fx.speeds.fast = 1000;
    });
});

jQuery.fx.interval 프로퍼티

• jQuery.fx 객체의 interval 프로퍼티는 이펙트 효과가 보여지는 동안의 초당 프레임 수
• 연속적인 프레임에서의 초당 프레임 수는 13으로 기본 설정
• 이러한 초당 프레임 수를 interval 프로퍼티를 이용하여 사용 목적에 맞게 변경 가능

jQuery.fx.off 프로퍼티

• jQuery.fx 객체의 off 프로퍼티를 true로 설정하면, 모든 이펙트 효과를 사용 X
• 이렇게 이펙트 효과가 비활성화되면, 이펙트 효과는 실행되지 않으며 이펙트 효과의 마지막 상태로 즉시 변경
• off 프로퍼티는 특히 구형 버전의 브라우저를 다룰 때 유용하게 사용

$(function() {
    $("#toggleBtn").on("click", function() {

        // id가 "divBox"인 요소를 1초에 걸쳐 올라가면서 사라지거나 내려오면서 나타나게 함.
        $("#divBox").slideToggle(1000);
    });

    $("#forbidBtn").on("click", function() {

        // jQuery.fx 객체의 off 프로퍼티를 true로 설정함.
        jQuery.fx.off = true;
    });
});

사용자 정의 이펙트

.animate() 메서드
제이쿼리에서는 animate() 메서드를 이용하여 사용자가 직접 원하는 이펙트 효과를 정의

.animate() 메서드의 원형
$(선택자).animate( 프로퍼티[,지속시간] [,시간당속도함수] [,콜백함수] );

• 프로퍼티 파라미터는 필수이며, 이펙트 효과를 구성할 CSS 속성을 정의
• 지속 시간은 이펙트 효과가 지속될 시간을 전달
• 시간당 속도 함수(easing function)는 이펙트 효과의 시간당 속도를 전달
• 콜백 함수는 이펙트 효과의 동작이 완료된 후에 실행할 함수를 정의

$(function() {
    $("#animateBtn").on("click", function() {
        $("#divBox").animate(    // id가 "divBox"인 요소를
            {
                left: "+=100",   // 오른쪽으로 100픽셀 이동하고,
                opacity: 0.2     // 투명도를 0.2로 변경함.
            }, 500, function() { // 0.5초에 걸쳐서 이펙트 효과가 진행됨.
                $("#text").html("사용자 정의 이펙트가 실행됐어요!");
            }
       );
    });
});

• 색(color)에 관한 속성을 제외한 거의 모든 CSS 속성을 사용 가능
• .css() 메서드에서는 하이픈(-)으로 연결된 CSS 속성 명과 camelCase 방식으로 바꾼 속성 명을 둘 다 사용 가능하지만 .animate() 메서드에서는 camelCase 방식의 속성 명만 사용 가능

.animate() 메서드에서 사용할 수 있는 CSS 속성(CTRL + f OR ⌘ + f 로 찾아서 사용)
- backgroundPositionX
- backgroundPositionY
- borderWidth
- borderBottomWidth
- borderLeftWidth
- borderRightWidth
- borderTopWidth
- borderSpacing
- margin
- marginBottom
- marginLeft
- marginRight
- marginTop
- outlineWidth
- padding
- paddingBottom
- paddingLeft
- paddingRight
- paddingTop
- height
- width
- maxHeight
- maxWidth
- minHeight
- minWidth
- fontSize
- bottom
- left
- right
- top
- letterSpacing
- wordSpacing
- lineHeight
- textIndent

$(function() {
    $("#animateBtn").on("click", function() {
        $("#divBox").animate({
            height: "toggle" // CSS height 속성값을 미리 정의된 "toggle"로 설정함.
        });
    });
});

.animate() 메서드는 시간당 속도 함수(easing function)을 사용하여 이펙트 효과의 시간당 속도를 설정

$(function() {
    $("#divBox").mouseenter( function() {
        $(this).stop().animate({
            width: "300px"  // CSS width 프로퍼티의 값을 "300px"로 설정함.
        }, 1000, "linear"); // 시간당 속도 함수를 "linear"으로 설정함.
    });

    $("#divBox").mouseleave( function() {
        $(this).stop().animate({
            width: "50px"   // CSS width 프로퍼티의 값을 "50px"로 설정함.
        }, 1000, "swing");  // 시간당 속도 함수를 "swing"으로 설정함.
    });
});

Reference

https://www.tcpschool.com/jquery/jq_effect_effectHandling

코딩교육 티씨피스쿨

https://www.tcpschool.com/jquery/jq_effect_jqueryfx

코딩교육 티씨피스쿨

https://www.tcpschool.com/jquery/jq_effect_customEffect

코딩교육 티씨피스쿨