이 게시물에서는 jQuery에서 hide()와 fadeOut(), show() 및 fadeIn() 간의 주요 차이점을 강조합니다.
jQuery에서 hide()와 fadeOut(), show() 및 fadeIn()의 차이점을 살펴보기 전에 먼저 다음 가이드를 읽고 이러한 메서드의 기본 사항을 살펴보세요.
- jQuery의 fadeIn() 메소드
- jQuery의 fadeOut() 메소드
- JavaScript JQuery Hide() 메서드 | 설명됨
- JQuery Show() 메서드 | 설명됨
먼저 jQuery의 hide() 메서드와 fadeOut() 메서드의 차이점을 살펴보세요.
jQuery에서 hide()와 fadeOut() 구별
“ 숨다() ' 그리고 ' 사라지다() ” 방법은 다음과 같습니다.
- 시간 간격 : “ 숨다() ' 메소드는 기본적으로 시간 간격을 사용하지 않고 즉시 불투명도를 100에서 0으로 변경하여 요소를 숨깁니다. 반면 ' 사라지다() ” 메서드는 페이드 아웃됩니다. 즉, 기본값인 “400ms”에 요소를 점진적으로 숨깁니다.
명시된 차이점을 실제로 구현하는 방법을 살펴보겠습니다.
먼저 다음 HTML 코드를 살펴보세요.
< 센터 >< h2 아이디 = 'H2' > 리눅스힌트에 오신 것을 환영합니다 ! h2 >
< 단추 > 요소 숨기기 단추 >
센터 >
위의 코드 줄에서:
- “ <중앙> ” 태그는 웹페이지 중앙에 있는 특정 요소의 정렬을 조정합니다.
- “ ” 태그는 ID가 “H2”인 레벨 2 부제목을 생성합니다.
- “ <버튼> ” 태그는 새로운 버튼을 삽입합니다.
메모: 이 가이드 전체에서는 위의 HTML 코드를 따릅니다.
예: '기본값'으로 jQuery 'hide()' 메소드 적용
이 예에서는 기본값과 함께 'hide()'를 적용하여 요소를 숨깁니다.
< 스크립트 >$ ( 문서 ) . 준비가 된 ( 기능 ( ) {
$ ( '단추' ) . 딸깍 하는 소리 ( 기능 ( ) {
$ ( '#H2' ) . 숨다 ( ) ;
} ) ;
} ) ;
스크립트 >
위의 코드 줄에서:
- 첫째, “ 준비가 된() ” 메소드는 현재 HTML 문서가 로드될 때 지정된 기능을 실행하기 위해 적용됩니다.
- 다음으로는 “ 딸깍 하는 소리() ” 메소드는 버튼 클릭 시 연결된 기능을 수행하는 역할을 담당합니다.
- 그 후, “ 숨다() ” 메소드는 ID가 “H2”인 액세스된 제목 요소를 즉시 숨깁니다.
산출
버튼을 클릭하면 제목 요소가 즉시 숨겨지는 것을 볼 수 있습니다.
예: '기본값'으로 jQuery 'fadeOut()' 메서드 적용
이 예제에서는 '400ms' 내에 지정된 요소를 점차적으로 숨기기 위해 기본값과 함께 'fadeOut()' 메서드를 사용합니다.
이 시나리오에서는 '버튼' 요소의 내용이 변경됩니다.
< 단추 > 사라지다 ( 숨다 요소 ) 단추 >이제 다음과 같은 방식으로 “fadeOut()” 메서드를 구현합니다.
< 스크립트 >$ ( 문서 ) . 준비가 된 ( 기능 ( ) {
$ ( '단추' ) . 딸깍 하는 소리 ( 기능 ( ) {
$ ( '#H2' ) . 사라지다 ( ) ;
} ) ;
} ) ;
스크립트 >
이때 “ 사라지다() ” 메소드는 액세스된 제목 요소를 400ms, 즉 기본값으로 페이드 아웃하기 위해 적용됩니다.
산출
출력은 주어진 버튼 클릭이 기본 시간 간격(예: '400ms')에서 제목 요소를 점진적으로 숨기는 것을 명확하게 보여줍니다.
jQuery에서 show()와 fadeIn()의 차이점
'hide()' 및 'fadeOut()' 메서드와 유사하게 'show()' 및 'fadeIn()' 메서드 사이에도 동일한 차이점이 있습니다.
- 시간 간격 : “ 보여주다() ' 메소드는 기본적으로 불투명도를 0에서 100으로 즉시 변경하여 숨겨진 요소를 표시하는 반면, ' 점점 뚜렷해지다() ” 메소드는 기본값인 “400ms” 단위로 숨겨진 요소를 점진적으로 표시합니다.
예: '기본값'으로 jQuery 'show()' 메서드 적용
이 예에서는 'show()'를 기본값과 함께 적용하여 숨겨진 요소를 표시합니다.
먼저 제공된 HTML 코드 블록을 살펴보세요.
< 센터 >< 단추 > 요소 표시 단추 >
< h2 아이디 = 'H2' 스타일 = '디스플레이:없음' > 리눅스힌트에 오신 것을 환영합니다 ! h2 >
센터 >
이 시나리오에 따르면, 주어진 제목 요소는 ' 디스플레이: 없음 ' 재산.
이제 주어진 코드 블록을 따라 'show()' 메소드의 실제 구현을 이해하십시오.
< 스크립트 >$ ( 문서 ) . 준비가 된 ( 기능 ( ) {
$ ( '단추' ) . 딸깍 하는 소리 ( 기능 ( ) {
$ ( '#H2' ) . 보여주다 ( ) ;
} ) ;
} ) ;
스크립트 >
위의 코드 블록은 “ 보여주다() ” 메소드를 사용하면 추가된 숨겨진 요소를 즉시 표시할 수 있습니다.
산출
버튼을 클릭하면 숨겨진 제목 요소가 즉시 표시되는 것을 볼 수 있습니다.
예: '기본값'으로 jQuery 'fadeIn()' 메서드 적용
이 예는 기본값이 ' '인 'fadeIn()' 메소드를 사용하여 숨겨진 요소를 보여줍니다. 400ms ':
버튼 요소의 텍스트는 주어진 시나리오에 따라 변경됩니다.
< 단추 > 점점 뚜렷해지다 ( 보여주다 요소 ) 단추 >이제 '를 적용해 보세요. 점점 뚜렷해지다() ” 다음 코드 블록을 사용하는 메서드:
< 스크립트 >$ ( 문서 ) . 준비가 된 ( 기능 ( ) {
$ ( '단추' ) . 딸깍 하는 소리 ( 기능 ( ) {
$ ( '#H2' ) . 점점 뚜렷해지다 ( ) ;
} ) ;
} ) ;
스크립트 >
이 코드 블록에서는 “ 점점 뚜렷해지다() ” 메소드는 400ms 안에 ID “H2”와 일치하는 숨겨진 요소를 표시하는 데 사용됩니다. 즉, 기본값입니다.
산출
주어진 버튼 클릭은 기본 시간 간격, 즉 '400ms'에서 숨겨진 요소를 점진적으로 표시하는 것을 관찰할 수 있습니다.
결론
jQuery에서 다음과 같은 유일한 주요 차이점은 숨다() 그리고 사라지다() , 보여주다() , 그리고 점점 뚜렷해지다() 방법은 “ 시간 간격 '. 'show()' 및 'hide()' 메소드는 기본적으로 해당 기능을 즉시 수행하는 반면, 'fadeIn()' 및 'fadeOut()' 메소드는 기본 시간 간격(예: '400ms')에 작업을 수행합니다. 이 게시물에서는 jQuery에서 hide()와 fadeOut(), show() 및 fadeIn()의 주요 차이점을 실제로 설명했습니다.