이 게시물에서는 부드러운 페이드 아웃 효과를 생성하기 위한 jQuery의 fadeOut() 메서드의 실제 구현에 대해 설명합니다.
jQuery의 fadeOut() 메서드를 사용하여 부드러운 페이드아웃 효과를 만드는 방법은 무엇입니까?
jQuery의 ' 사라지다() ” 메서드는 불투명도를 줄여서 선택한 요소를 점차적으로 숨깁니다. 이 메서드는 선택한 요소의 상태를 표시에서 숨김으로 변경합니다. 숨겨진 요소는 사용자가 '를 사용하여 다시 표시할 때까지 웹 페이지에 표시되지 않습니다. 점점 뚜렷해지다() ' 방법.
통사론
$ ( 선택자 ) . 사라지다 ( 속도, 완화, 콜백 ) ;
위 구문은 페이드 아웃 효과를 사용자 정의하기 위해 다음과 같은 선택적 매개 변수를 지원합니다.
- 속도: 페이딩 효과의 속도를 밀리초 단위로 지정합니다. 기본적으로 해당 값은 '400ms'입니다. 또한 '느림'과 '빠름'이라는 두 가지 내장 값도 지원합니다.
- 완화: 다양한 지점에서 페이딩 애니메이션 속도를 보여줍니다. 기본적으로 해당 값은 'swing(시작/끝에서는 느리고 중간에서는 느림)'입니다. 또한 '선형(페이딩 애니메이션의 일정한 속도)'에서도 작동합니다.
- 콜백: 페이딩 애니메이션이 완료된 후 실행되어 정의된 작업을 수행하는 사용자 정의 함수를 정의합니다.
위에서 정의한 방법을 실제로 사용해 보겠습니다.
HTML 코드
'fadeOut()' 메서드로 이동하기 전에 페이드 아웃 효과가 수행될 샘플 'div' 요소를 생성하는 다음 HTML 코드를 살펴보세요.
< 단추 > 사라지다 ( 숨다 요소 ) 단추 >< br >< br >< 사업부 ID = '내 사업부' 스타일 = '높이: 80px; 너비: 300px; 테두리: 2px 단색 검정색; 여백: 자동; 텍스트 정렬: 가운데' >
< h2 > 리눅스힌트에 오신 것을 환영합니다 h2 >
div >
위의 코드 줄에서:
- “ <버튼> ” 태그는 버튼 요소를 추가합니다.
- “ ” 태그는 ID가 'myDiv'인 div 요소를 생성하고 다음 스타일 속성(높이, 너비, 테두리, 여백, 텍스트 정렬)을 사용하여 스타일을 지정합니다.
- div 내부에는 ' ” 태그는 수준 2의 첫 번째 하위 제목 요소를 지정합니다.
이제 첫 번째 예부터 시작해 보세요.
예 1: fadeOut() 기본값을 사용하여 부드러운 페이드아웃 효과 만들기
첫 번째 예에서는 기본값이 '400ms'인 'fadeOut()' 메서드를 활용하여 일치하는 div 요소를 숨깁니다.
< 스크립트 >
$ ( 문서 ) . 준비가 된 ( 기능 ( ) {
$ ( '단추' ) . 딸깍 하는 소리 ( 기능 ( ) {
$ ( '#나의 사업부' ) . 사라지다 ( ) ;
} ) ;
} ) ;
스크립트 >위의 코드 줄에서:
- 첫째, “ 준비가 된() ” 메소드는 현재 HTML 문서/DOM이 로드될 때 지정된 기능을 실행합니다.
- 다음으로는 “ 딸깍 하는 소리() ” 메소드는 연관된 “버튼” 선택기를 클릭할 때 버튼 클릭 시 연결된 기능을 실행합니다.
- 그 후, “ 사라지다() ” 메소드는 ID가 'myDiv'인 액세스된 div 요소를 400ms, 즉 기본값으로 숨깁니다.
산출
주어진 버튼 클릭이 “400ms”에 div 요소를 점진적으로 페이드아웃하는 것으로 관찰됩니다.
예 2: fadeOut() 'speed' 매개변수를 사용하여 부드러운 페이드아웃 효과 만들기
이 예에서는 'speed' 매개변수에 내장된 값(slow/fast)과 함께 'fadeOut()' 메서드를 사용합니다.
< 스크립트 >
$ ( 문서 ) . 준비가 된 ( 기능 ( ) {
$ ( '단추' ) . 딸깍 하는 소리 ( 기능 ( ) {
$ ( '#나의 사업부' ) . 사라지다 ( '느린' ) ;
} ) ;
} ) ;
스크립트 >이제 “ 사라지다() ” 메소드는 “를 전달합니다. 느린 ” 값을 매개변수로 사용하여 페이드 아웃 효과를 부드럽게 생성합니다. 즉, 선택한 div 요소 상태를 표시에서 숨김으로 변경합니다.
산출
버튼 클릭시 선택된 div 요소가 천천히 숨겨지는 것을 볼 수 있습니다.
예 3: fadeOut() “duration” 매개변수를 사용하여 부드러운 페이드아웃 효과 만들기
이 예에서는 기간 매개변수로 특정 밀리초 수를 사용하여 'fadeOut()' 메서드를 적용합니다.
< 스크립트 >
$ ( 문서 ) . 준비가 된 ( 기능 ( ) {
$ ( '단추' ) . 딸깍 하는 소리 ( 기능 ( ) {
$ ( '#나의 사업부' ) . 사라지다 ( 6000 ) ;
} ) ;
} ) ;
스크립트 >이제 'fadeOut()' 메소드는 지정된 시간(밀리초) 동안 일치하는 요소를 숨기기 위해 지정된 시간을 사용합니다.
산출
위 출력은 지정된 시간 간격 동안 버튼을 클릭할 때 지정된 div 요소 변경 사항을 숨깁니다.
예제 4: fadeOut() '콜백' 함수를 사용하여 부드러운 페이드아웃 효과 만들기
이 예에서는 'fadeOut()' 메서드를 통해 페이드 아웃 효과가 완료되면 콜백 함수를 실행합니다.
< 스크립트 >
$ ( 문서 ) . 준비가 된 ( 기능 ( ) {
$ ( '단추' ) . 딸깍 하는 소리 ( 기능 ( ) {
$ ( '#나의 사업부' ) . 사라지다 ( 4000 , 기능 ( ) {
콘솔. 통나무 ( '주어진 div 요소가 성공적으로 숨겨졌습니다!' )
} ) ;
} ) ;
} ) ;
스크립트 >명시된 코드 블록에서:
- “ 사라지다() ” 메소드는 특정 밀리초 내에 일치하는 div 요소를 페이드 아웃한 다음 제공된 “콜백” 기능을 실행합니다.
- “ 안에 콜백 ” 기능, “ 콘솔.로그() '페이드 아웃' 효과가 완료된 후 지정된 문을 표시하기 위해 '메소드가 적용됩니다.
산출
“콘솔”에는 주어진 div 요소를 숨긴 후 콜백 함수에 정의된 명령문이 표시되는 것을 볼 수 있습니다.
예 5: fadeOut() 'easing' 매개변수를 사용하여 부드러운 페이드아웃 효과 만들기
이 예에서는 'easing' 매개변수의 가능한 값과 함께 'fadeOut()' 메서드를 적용합니다.
< 스크립트 >
$ ( 문서 ) . 준비가 된 ( 기능 ( ) {
$ ( '단추' ) . 딸깍 하는 소리 ( 기능 ( ) {
$ ( '#나의 사업부' ) . 사라지다 ( 4000 , '선의' ) ;
} ) ;
} ) ;
스크립트 >이제 “ 사라지다() ” 메서드는 “ 때문에 일정한 속도로 특정 밀리초 단위로 페이드 아웃 효과를 수행합니다. 선의 ' 값.
산출
출력은 지정된 요소 상태를 일정한 속도로 표시 상태에서 숨김 상태로 변경합니다. 이것이 요소에 '페이드 아웃' 효과를 구현하는 것입니다.
결론
jQuery의 “ 사라지다() ” 방법을 사용하면 사용자에게 추가 매개변수가 필요하지 않습니다. 이 방법은 페이드 아웃됩니다. 즉, 불투명도를 변경하여 요소를 점차적으로 숨깁니다. 사용자가 특정 밀리초 단위로 페이드 아웃 효과를 수행해야 하는 경우 콜백 함수를 실행한 다음 'fadeOut()' 메서드와 함께 'speed', 'easing' 및 'callback' 매개 변수를 사용합니다. 이번 포스팅에서는 부드러운 페이드 아웃 효과를 생성하기 위한 jQuery의 fadeOut() 메서드를 실제로 설명했습니다.