요소 표시, 숨기기, 전환 및 Sliding_jquery를 제어하는 jQuery 메서드 요약-JS 튜토리얼-php.cn

jQuery 숨기기 및 표시

Hide()와 show()라는 두 가지 함수를 통해 jQuery는 HTML 요소 숨기기 및 표시를 지원합니다.
예시

코드 복사 코드는 다음과 같습니다.

$("#hide").click(function(){

$("p").hide();

});

$("#show").click(function(){

$("p").show();

});

hide() 및 show() 모두 속도와 콜백이라는 두 가지 선택적 매개변수를 설정할 수 있습니다.
구문:

코드 복사 코드는 다음과 같습니다.

$(selector).hide(속도,콜백)

$(selector).show(속도,콜백)

speed 매개변수는 표시하거나 숨길 속도를 지정합니다. "느림", "빠름", "보통" 또는 밀리초 값을 설정할 수 있습니다.
콜백 매개변수는 숨기기 또는 표시 기능이 완료된 후 실행될 함수의 이름입니다. 이 튜토리얼의 뒷부분에서 콜백 매개변수에 대해 자세히 알아볼 것입니다.
예시

코드 복사 코드는 다음과 같습니다.

$("버튼").click(function(){

$("p").hide(1000);

});

콜백 매개변수는 이 함수가 완료된 후 실행될 함수의 이름입니다. 이 튜토리얼의 뒷부분에서 콜백 매개변수에 대해 자세히 알아볼 것입니다.

jQuery 슬라이딩 기능 - SlideDown, SlideUp, SlideToggle

jQuery에는 다음과 같은 슬라이딩 기능이 있습니다.

코드 복사 코드는 다음과 같습니다.

$(selector).slideDown(속도,콜백)

$(selector).slideUp(속도,콜백)

$(selector).slideToggle(속도,콜백)

속도 매개변수는 "느림", "빠름", "보통" 또는 밀리초 값을 설정할 수 있습니다.
콜백 매개변수는 이 함수가 완료된 후 실행될 함수의 이름입니다. 이 튜토리얼의 뒷부분에서 콜백 매개변수에 대해 자세히 알아볼 것입니다.
SlideDown() 인스턴스

코드 복사 코드는 다음과 같습니다.

$(".flip").click(function(){

$(".panel").slideDown();

});

jQuery 페이드 함수 - fadeIn(), fadeOut(), fadeTo()
jQuery에는 다음과 같은 페이드 기능이 있습니다.

코드 복사 코드는 다음과 같습니다.

$(selector).fadeIn(속도,콜백)

$(selector).fadeOut(속도,콜백)

$(selector).fadeTo(speed,opacity,callback)

속도 매개변수는 "느림", "빠름", "보통" 또는 밀리초 값을 설정할 수 있습니다.
fadeTo() 함수의 불투명도 매개변수는 지정된 불투명도에 대한 페이드를 지정합니다.
콜백 매개변수는 이 함수가 완료된 후 실행될 함수의 이름입니다. 이 튜토리얼의 뒷부분에서 콜백 매개변수에 대해 자세히 알아볼 것입니다.

jQuery 사용자 정의 애니메이션

jQuery 함수를 사용하여 사용자 정의 애니메이션을 생성하기 위한 구문:

코드 복사 코드는 다음과 같습니다.

$(selector).animate({params},[기간],[easing],[콜백])

주요 매개변수는 params입니다. 애니메이션을 적용하는 CSS 속성을 정의합니다. 이러한 속성은 여러 개 동시에 설정할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});

두 번째 매개변수는 기간입니다. 애니메이션에 적용하는 데 사용되는 시간을 정의합니다. 설정되는 값은 "느림", "빠름", "보통" 또는 밀리초입니다.
예시

코드 복사 코드는 다음과 같습니다.

저자별 최신 기사