jQuery 효과- 숨기기와 표시

jQuery는 다양한 놀라운 효과를 실행하기 위해 간단한 인터페이스를 제공합니다.

jQuery 효과 메서드는 최소의 설정으로 빠르게 일반적인 효과를 구현할 수 있게 합니다.

jQuery hide()와 show()

사용할 수 있습니다hide()와show()메서드는 HTML 요소를 숨기고 표시합니다.

다음 예제에서 hide()와 show() 메서드의 사용법을 설명합니다：

//　표시된 구절을 숨깁니다
$("#hide-btn").click(function(){
　　$("p").hide();
});
//　숨겨진 구절을 표시합니다
$("#show-btn").click(function(){
　　$("p").show();
});

이것은hide() 메서드 문법：

$(selector).hide(duration,　easing,　callback);

이것은show()메서드 문법：

$(selector).show(duration,　easing,　callback);

hide()와show()메서드는 세 가지 선택 사항적인 매개변수를 받습니다:

• 지속 -효과가지속시간이 얼마나 걸릴까요. 가능한 값은 "slow", "fast" 또는 밀리초

• easing -전환에 사용할缓衝 기능을 지정합니다. 가능한 값: "swing", "linear"

• 콜백-지정된 메서드가 완료된 후 호출되는 함수

다음 예제에서 hide()와 show()를 사용하여 설명합니다:지속파라미터：

$("#hide-btn").click(function(){
　　$("p").hide(1000);
});
$("#show-btn").click(function(){
　　$("p").show(1000);
});

다음 예제에서 hide()와 show()를 사용하여 설명합니다:콜백파라미터：

$("#hide-btn").click(function(){
　　$("div").hide(1000,　function(){
　　　　alert("DIV가 숨겨졌습니다");
　　});
});
$("#show-btn").click(function(){
　　$("div").show(1000,　function(){
　　　　alert("DIV가 표시되었습니다");
　　});
});

애니메이션 전체 범위(이 예제에서는 단어)를 빠르게 숨기고,200 밀리초 내에 각 애니메이션을 완료합니다：

$("button").click(function(){
　　$("span:last-child").hide("fast",　function(){
$(this).prev().hide("fast",　arguments.callee);
　　});
});

jQuery 토글() 메서드

우리는 또한 사용할 수 있습니다toggle()메서드는 HTML 요소를 숨기고 보여주는 것 간에 전환합니다.

선택된 요소가 원래 보이고 있으면 숨기고, 숨겨져 있으면 보여집니다.

아래의 예제는 버튼을 클릭할 때 hide와 show 모두를 숨기고 보여줍니다<p>요소 간 전환:

$("button").click(function(){
　　$("p").toggle(1500);
});

toggle()메서드의 문법은 다음과 같습니다:

$(selector).toggle(duration, easing, callback);

toggle()메서드는 세 가지 선택 사항적인 매개변수를 받습니다:

• 지속　 -효과가지속시간이 얼마나 지나야 합니까. 가능한 값: "slow", "fast" 또는 밀리초

• easing -전환에 사용할缓衝 기능을 지정합니다. 가능한 값: "swing", "linear"

• 콜백-지정된 메서드가 완료된 후 호출되는 함수

jQuery 효과 참조

최종 효과 참조에 대해 방문해 주세요jQuery Effects 참조 가이드。