jQuery 문서에 오신 것을 환영합니다! 이 랩에서는 효과 (effects) 에 대한 소개를 제공합니다.
jQuery 를 사용하면 페이지에 간단한 효과를 쉽게 추가할 수 있습니다. 효과는 내장된 설정을 사용하거나, 사용자 정의 지속 시간을 제공할 수 있습니다. 또한 임의의 CSS 속성에 대한 사용자 정의 애니메이션을 만들 수도 있습니다.
index.html은 이미 VM 에 제공되었습니다.
jQuery 는 .show() 또는 .hide()를 사용하여 콘텐츠를 즉시 표시하거나 숨길 수 있습니다.
// 모든 단락을 즉시 숨깁니다.
$("p").hide();
// hidden 스타일 클래스를 가진 모든 div 를 즉시 표시합니다.
$("div.hidden").show();jQuery 가 요소를 숨기면 해당 CSS display 속성을 none으로 설정합니다. 이는 콘텐츠의 너비와 높이가 0 이 된다는 의미입니다. 단순히 콘텐츠가 투명해져 페이지에 빈 영역이 남는다는 의미가 아닙니다.
jQuery 는 또한 애니메이션 효과를 통해 콘텐츠를 표시하거나 숨길 수 있습니다. .show()와 .hide()에 애니메이션을 사용하도록 몇 가지 방법으로 지시할 수 있습니다. 한 가지 방법은 'slow', 'normal', 또는 'fast' 인수를 전달하는 것입니다.
// 모든 단락을 천천히 숨깁니다.
$("p").hide("slow");
// hidden 스타일 클래스를 가진 모든 div 를 빠르게 표시합니다.
$("div.hidden").show("fast");애니메이션 효과의 지속 시간에 대한 더 직접적인 제어를 선호하는 경우, 원하는 지속 시간을 밀리초 단위로 .show()와 .hide()에 전달할 수 있습니다.
// 모든 단락을 0.5 초 동안 숨깁니다.
$("p").hide(2000);
// hidden 스타일 클래스를 가진 모든 div 를 1.25 초 동안 표시합니다.
$("div.hidden").show(1250);대부분의 개발자는 지속 시간에 대한 더 정확한 제어를 위해 밀리초 단위의 숫자를 전달합니다.
웹 서비스는 포트 8080 에서 실행되므로, 오른쪽 하단의 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.
jQuery 를 사용하면 현재 가시성 상태에 따라 콘텐츠의 가시성을 변경할 수도 있습니다. .toggle()은 현재 숨겨진 콘텐츠를 표시하고 현재 보이는 콘텐츠를 숨깁니다. 위에서 언급한 효과 메서드에 전달하는 것과 동일한 인수를 .toggle()에 전달할 수 있습니다.
// 모든 단락의 표시를 즉시 토글합니다.
$("p").toggle();
// 모든 div 의 표시를 1.8 초 동안 토글합니다.
$("div").toggle(1800);.toggle()은 .show()와 .hide()와 마찬가지로 슬라이드 및 페이드 효과의 조합을 사용합니다.
Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.
jQuery 효과를 구현할 때 흔히 저지르는 실수는 체인에서 다음 메서드의 실행이 애니메이션이 완료될 때까지 기다릴 것이라고 가정하는 것입니다.
$("div.hidden").fadeIn(1500).addClass("lookAtMe");위의 .fadeIn()은 단지 애니메이션을 시작할 뿐이라는 것을 깨닫는 것이 중요합니다. 일단 시작되면, 애니메이션은 JavaScript setInterval() 루프에서 CSS 속성을 빠르게 변경하여 구현됩니다. .fadeIn()을 호출하면 애니메이션 루프가 시작되고 jQuery 객체를 반환하여 .addClass()로 전달됩니다. 그러면 애니메이션 루프가 시작되는 동안 lookAtMe 스타일 클래스가 추가됩니다.
애니메이션이 완료된 후에 작업을 연기하려면 애니메이션 콜백 함수를 사용해야 합니다. 위에서 논의한 모든 애니메이션 메서드에 전달되는 두 번째 인수로 애니메이션 콜백을 지정할 수 있습니다. 위의 코드 조각의 경우, 다음과 같이 콜백을 구현할 수 있습니다.
// 모든 숨겨진 단락을 페이드 인합니다. 그런 다음 스타일 클래스를 추가합니다 (애니메이션 콜백으로 수정).
$("div.hidden").fadeIn(1500, function () {
// this = 방금 애니메이션이 완료된 DOM 요소
$(this).addClass("lookAtMe");
});this 키워드를 사용하여 애니메이션 중인 DOM 요소를 참조할 수 있습니다. 또한 콜백은 jQuery 객체의 각 요소에 대해 호출됩니다. 즉, 선택자가 요소를 반환하지 않으면 애니메이션 콜백이 실행되지 않습니다! 선택이 요소를 반환했는지 테스트하여 이 문제를 해결할 수 있습니다. 그렇지 않은 경우 콜백을 즉시 실행할 수 있습니다.
// 애니메이션할 요소가 없더라도 콜백을 실행합니다.
var someElement = $("#nonexistent");
var cb = function () {
console.log("done!");
};
if (someElement.length) {
someElement.fadeIn(300, cb);
} else {
cb();
}Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.
축하합니다! 효과 소개 랩을 완료했습니다. jQuery API 에 대해 자세히 알아보려면 공식 jQuery 문서를 참조하십시오.