Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- 자바스크립트 코딩의 기술
- Linux
- 월간코드챌린지
- 문자열
- 코딩테스트
- 연습문제
- 백준 java
- 반복문
- 프로그래머스
- 고잉버스
- GoingBus
- 스프링 빈
- 코테
- 카카오
- toCharArray
- 개발자 회고록
- 리눅스마스터1급
- Kotlin
- 백준 javascript
- 리눅스마스터 3과목
- JavaScript
- 스프링 컨테이너
- map
- 자바
- 명령어
- Java
- java 백준 1차원 배열
- 리눅스마스터 1급 정리
- 리눅스
- Memoir
Archives
- Today
- Total
hoon's bLog
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
728x90
반응형
'IT > HTML, jQuery, Ajax' 카테고리의 다른 글
ajax 기본 개념, 데이터 형식 (0) | 2023.07.21 |
---|---|
jQuery effect 이펙트 효과의 제어 (0) | 2023.07.19 |
jQuery event delegation propagation 이벤트 위임 전파 버블링 (0) | 2023.07.17 |
jQuery event handler object 이벤트 개념 및 처리 (1) | 2023.07.14 |
jQuery class 클래스 속성 설정 및 클래스 메서드 (0) | 2023.07.13 |