jQuery effect 제이쿼리 이펙트 효과

---

요소의 표시와 숨김

• .hide() 메서드를 통해 숨겨진 요소는 CSS display 속성값이 none으로 설정
• 즉, 이렇게 숨겨진 요소는 웹 페이지의 레이아웃에 영향을 주지 않고 완전히 사라짐.

$(function() {
    $("#showBtn").on("click", function() {
        $("#text").show(); // id가 "text"인 요소를 나타나게 함.
    });

    $("#hideBtn").on("click", function() {
        $("#text").hide(); // id가 "text"인 요소를 숨김.
    });
});
// CSS의 visibility 속성의 속성값을 hidden으로 설정해도 HTML 요소 숨기기 가능
// 하지만 이때는 보이지만 않을 뿐 숨겨진 요소는 여전히 웹 페이지의 레이아웃에 영향을 줌
 

// 인수로 밀리초에 해당하는 숫자나 "slow", "fast" 등의 예약어를 전달하여, 이펙트 효과의 속도를 조절 가능
$(function() {
    $("#showBtn").on("click", function() {
        $("#text").show(2000);   // id가 "text"인 요소를 2초에 걸쳐 나타나게 함.
    });

    $("#hideBtn").on("click", function() {
        $("#text").hide("fast"); // id가 "text"인 요소를 빠르게 숨김.
    });
});

 

요소의 표시 상태 토글

• 제이쿼리에서는 선택한 요소의 현재 표시 상태에 따라 다른 동작을 하는 .toggle() 메서드를 사용 가능
• 선택한 요소가 현재 사라진 상태라면 .show() 메서드의 동작을 수행하고, 나타나 있는 상태라면 .hide() 메서드의 동작 수행

$(function() {
    $("#toggleBtn").on("click", function() {
        $("#text").toggle("slow"); // id가 "text"인 요소를 느리게 나타나게 하거나 숨김.
    });
});

• Shift, Esc, Delete와 같은 화면에 출력되지 않는 키(modifier and non-printing keys)들은 "keydown" 이벤트는 발생시키지만, "keypress" 이벤트는 발생 X

키보드 이벤트와 관련된 메서드

.keydown()	자바스크립트의 "keydown" 이벤트와 이벤트 핸들러를 연결하거나, 해당 요소에 "keydown" 이벤트를 발생시킴.
.keyup()	자바스크립트의 "keyup" 이벤트와 이벤트 핸들러를 연결하거나, 해당 요소에 "keyup" 이벤트를 발생시킴.
.keypress()	자바스크립트의 "keypress" 이벤트와 이벤트 핸들러를 연결하거나, 해당 요소에 "keypress" 이벤트를 발생시킴.
.focusin()	자바스크립트의 "focusin" 이벤트와 이벤트 핸들러를 연결
.focusout()	자바스크립트의 "focusout" 이벤트와 이벤트 핸들러를 연결

$(function() {
    // 아이디가 "focus"인 요소에 focusin 이벤트를 설정함.
    $("#focus").on("focusin", function(event) {
        $(this).css("backgroundColor", "yellow");
    });

    // 아이디가 "focus"인 요소에 focusout 이벤트를 설정함.
    $("#focus").on("focusout", function(event) {
        // this : this 키워드는 현재 선택되어 있는 요소 그 자체를 명시
        $(this).css("backgroundColor", "white");
    });
});

페이드(fade) 효과

제이쿼리에서 페이드(fade) 효과는 해당 요소의 CSS opacity 속성값을 빠르게 변경하여 표현

페이드 인(fade in), 페이드 아웃(fade out)

• .fadeIn() : 선택한 요소를 서서히 사라지게 함.
• .fadeOut() : 서서히 나타나게 함.

$(function() {
    $("#fadeInBtn").on("click", function() {
        $("#divBox").fadeIn("slow"); // id가 "divBox"인 요소를 느리게 점점 나타나게 함.
    });

    $("#fadeOutBtn").on("click", function() {
        $("#divBox").fadeOut(2000);  // id가 "divBox"인 요소를 2초에 걸쳐 점점 사라지게 함.
    });
});

• 위의 예제처럼 페이드 아웃 효과가 끝나게 되면, 해당 요소는 웹 페이지의 레이아웃에서 완전히 사라짐.
• 인수로 밀리초에 해당하는 숫자나 "slow", "fast" 등의 예약어를 전달하여, 페이드 효과의 속도를 조절 가능

페이드 효과의 토글

• 제이쿼리에서는 선택한 요소의 현재 표시 상태에 따라 다른 동작을 하는 .fadeToggle() 메서드를 사용 가능
• 선택한 요소가 현재 사라진 상태라면 .fadeIn() 메서드의 동작을 수행하고, 나타나 있는 상태라면 .fadeOut() 메서드의 동작 수행

$(function() {
    $("#fadeToggleBtn").on("click", function() {
        // id가 "divBox"인 요소를 1초에 걸쳐 점점 나타나게 하거나 사라지게 함.
        $("#divBox").fadeToggle(1000);
    });
});

페이드 효과의 투명도 설정 : .fadeTo() 메서드를 사용하면, 페이드 효과에서 사용하는 최종 opacity 속성값을 직접 설정

$(function() {
    $("#fadeBtn").on("click", function() {
        // id가 "divBox_01"인 요소를 2초에 걸쳐 opacity 속성값을 0.2까지만 변경시킴.
        $("#divBox_01").fadeTo(2000, 0.2);

        // id가 "divBox_02"인 요소를 2초에 걸쳐 opacity 속성값을 0.5까지만 변경시킴.
        $("#divBox_02").fadeTo(2000, 0.5);

        // id가 "divBox_03"인 요소를 2초에 걸쳐 opacity 속성값을 0.8까지만 변경시킴.
        $("#divBox_03").fadeTo(2000, 0.8);
    });
});

페이드 효과와 관련된 메서드

• .fadeIn() : 선택한 요소의 CSS opacity 속성값을 높여가며 요소를 나타나게 함.
• .fadeOut() : 선택한 요소의 CSS opacity 속성값을 높여가며 요소를 사라지게 함.
• .fadeTo() : 페이드 효과에서 사용하는 opacity 속성값을 직접 설정함.
• .fadeToggle() : 선택한 요소에 fadeIn() 메서드와 fadeOut() 메서드를 번갈아가며 적용함.

슬라이드(slide) 효과

제이쿼리에서 슬라이드(slide) 효과는 해당 요소의 CSS height 속성값을 빠르게 변경하여 표현

슬라이드 업(slide up), 슬라이드 다운(slide down)

• .slideUp() : 선택한 요소가 서서히 올라가면서 사라지는 효과
• .slideDown() : 선택한 요소가 서서히 내려오면서 나타나는 효과

$(function() {
    $("#slideUpBtn").on("click", function() {
        $("#divBox").slideUp();   // id가 "divBox"인 요소를 올라가면서 사라지게 함.
    });

    $("#slideDownBtn").on("click", function() {
        $("#divBox").slideDown(); // id가 "divBox"인 요소를 내려오면서 나타나게 함.
    });
});

// 인수로 밀리초에 해당하는 숫자나 "slow", "fast" 등의 예약어를 전달하여, 슬라이드 효과의 속도를 조절 가능
$(function() {
    $("#slideUpBtn").on("click", function() {
        $("#divBox").slideUp(500);   // id가 "divBox"인 요소를 0.5초에 걸쳐 올라가면서 사라지게 함.
    });

    $("#slideDownBtn").on("click", function() {
        $("#divBox").slideDown(300); // id가 "divBox"인 요소를 0.3초에 걸쳐 내려오면서 나타나게 함.
    });
});

슬라이드 효과의 토글

• 제이쿼리에서는 선택한 요소의 현재 표시 상태에 따라 다른 동작을 하는 .slideToggle() 메서드를 사용 가능
• 선택한 요소가 현재 사라진 상태라면 .slideDown() 메서드의 동작을 수행하고, 나타 상태라면 .slideUp() 메서드의 동작을 수행

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

        // id가 "divBox"인 요소를 빠르게 올라가면서 사라지거나 내려오면서 나타나게 함.

        $("#divBox").slideToggle("fast");
    });
});

슬라이드 효과와 관련된 메서드

.slideUp() : 선택한 요소의 CSS height 속성값을 높여가며 요소를 사라지게 함.
.slideDown() : 선택한 요소의 CSS height 속성값을 낮춰가며 요소를 나타나게 함.
.slideToggle() : 선택한 요소에 slideUp() 메서드와 slideDown() 메서드를 번갈아가며 적용

Reference

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

코딩교육 티씨피스쿨

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

코딩교육 티씨피스쿨