jQuery가 요소를 표시하고 숨기는 다양한 방법을 살펴보세요.

jQuery는 프런트 엔드 개발에서 상호 작용과 애니메이션을 단순화하는 데 사용되는 인기 있는 JavaScript 라이브러리입니다. 일반적인 사용법 중 하나는 DOM 요소의 가시성을 조작하는 것입니다. 이 기사에서는 jQuery가 요소를 표시하고 숨기는 다양한 방법을 살펴보겠습니다.

표시 요소

먼저 jQuery를 사용하여 요소를 표시하는 방법을 살펴보겠습니다. 일반적으로 다음 세 가지 메서드가 있습니다.

.show()

먼저 .show() 메서드가 있습니다. 이 메소드를 숨겨진 요소에 호출하여 표시할 수 있습니다. 예를 들어, "myDiv"라는 요소를 표시하려면 다음과 같이 작성할 수 있습니다.

$("#myDiv").show();

.show( speed [, easing ] [, callback ] )

.show() 메서드 외에도 다음과 같은 메서드가 있습니다. 매개변수 버전. 이 방법을 통해 디스플레이 애니메이션의 속도와 완화 효과를 설정할 수 있습니다. 예를 들어, "느린" 속도로 "myDiv" 요소를 표시하려면 다음과 같이 작성합니다.

$("#myDiv").show("slow");

콜백 함수를 사용하려면 easing 매개변수 다음에 정의해야 합니다.

.fadeIn()

.fadeIn( speed [, easing ] [, callback ] )

.fadeIn() 메서드는 이전 메서드와 유사하지만 요소를 즉시 표시하는 대신 페이드 ​​인합니다. 이 메서드는 속도, 여유 효과, 콜백 매개변수도 사용할 수 있습니다. 예를 들어, "myDiv"를 "빠른" 속도로 페이드 인하려면 다음과 같이 작성합니다.

$("#myDiv").fadeIn("fast");

.hide()

.show() 메서드는 요소를 숨김에서 표시로 가져오는 반면, .hide() 메서드는 요소를 숨김에서 표시로 가져옵니다. 반대 . 이 메서드는 요소를 보이지 않도록 설정할 수 있지만 요소의 위치나 차지하는 공간은 변경되지 않습니다. 예를 들어 "myDiv"를 숨기려면 다음과 같이 작성할 수 있습니다.

$("#myDiv").hide();

.hide( speed [, easing ] [, callback ] )

.hide() 메서드는 속도, 완화 효과 및 콜백 매개변수도 사용할 수 있습니다. .show() 메소드. 예를 들어, "느린" 속도로 "myDiv"를 숨기려면 다음과 같이 작성할 수 있습니다.

$("#myDiv").hide("slow");

.fadeOut()

.fadeOut( speed [, easing ] [, callback ] )

은 .fadeIn()과 유사합니다. 메서드, .fadeOut() 메서드도 있습니다. 요소를 페이드 아웃하고 속도, 완화 및 콜백 매개변수를 사용할 수 있습니다. 예를 들어, "myDiv"를 "중간" 속도로 페이드 아웃하려면 다음과 같이 작성합니다:

$("#myDiv").fadeOut("medium");

Toggle element visible

.show() 및 .hide() 메소드를 사용하여 각각 요소를 표시하고 숨길 수 있지만 경우에 따라 전체 토글 요소 가시성이 필요합니다. 이때 .toggle() 메소드를 사용할 수 있습니다.

.toggle()

.toggle( speed [, easing ] [, callback ] )

.toggle() 메서드는 요소 표시와 숨기기 간에 전환할 수 있습니다. 즉, 요소가 표시되면 숨겨집니다. , 그 반대도 마찬가지로 마찬가지입니다. 이 메서드는 속도, 완화 효과 및 콜백 매개변수도 사용할 수 있습니다. 예를 들어, "myDiv"의 가시성을 토글하고 콜백 함수에 콘솔 메시지를 출력하려면 다음과 같이 작성할 수 있습니다.

$("#myDiv").toggle("fast", function() {
  console.log("Toggled visibility of #myDiv.");
});

Summary

이 기사에서는 다음을 포함하여 jQuery 메서드에서 요소의 가시성을 제어하는 ​​다양한 방법을 소개했습니다. .show(), .hide(), .fadeIn(), .fadeOut() 및 .toggle(). 이러한 방법은 원활한 상호 작용과 애니메이션을 생성하는 편리한 방법을 제공하는 동시에 프런트 엔드 개발의 유연성과 유지 관리 가능성을 향상시킵니다.

위 내용은 jQuery가 요소를 표시하고 숨기는 다양한 방법을 살펴보세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!