jQuery 효과 - 페이딩
jQuery를 사용하면 요소를 페이드 인 및 페이드 아웃할 수 있습니다.
패널을 페이드 인/아웃하려면 클릭하세요.
시간은 소중하기 때문에 빠르고 쉬운 학습을 제공합니다.
W3Schools에서는 배우기 위해 필요한 모든 것을 접근 가능하고 편리한 형식으로 공부할 수 있습니다.
예
jQuery fadeIn() 메소드를 보여줍니다.
jQuery fadeOut() 메소드를 보여줍니다.
jQuery fadeToggle() 메소드를 보여줍니다.
jQuery fadeTo() 메소드를 보여줍니다.
jQuery 페이딩 방법
jQuery를 사용하면 요소를 페이드 인 및 페이드 아웃할 수 있습니다.
jQuery에는 다음과 같은 페이드 메서드가 있습니다.
fadeIn()fadeOut()fadeToggle()fadeTo()
jQuery 페이드인() 메서드
jQuery fadeIn()메서드는 숨겨진 요소를 페이드 인하는 데 사용됩니다.
통사론:
$(selector).fadeIn(speed,callback);
선택적 속도 매개변수는 효과의 지속 시간을 지정합니다. "slow", "fast" 또는 밀리초 값을 사용할 수 있습니다.
선택적 콜백 매개변수는 페이딩이 완료된 후 실행되는 함수입니다.
다음 예는 fadeIn()다른 매개변수를 사용하는 방법을 보여줍니다.
예시
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
jQuery 페이드아웃() 메서드
jQuery fadeOut()메서드는 보이는 요소를 페이드 아웃하는 데 사용됩니다.
통사론:
$(selector).fadeOut(speed,callback);
선택적 속도 매개변수는 효과의 지속 시간을 지정합니다. "slow", "fast" 또는 밀리초 값을 사용할 수 있습니다.
선택적 콜백 매개변수는 페이딩이 완료된 후 실행되는 함수입니다.
다음 예는 fadeOut()다른 매개변수를 사용하는 방법을 보여줍니다.
예시
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
jQuery fadeToggle() 메서드
jQuery 메소드는 및 메소드 fadeToggle()사이를 토글
합니다.fadeIn()fadeOut()
요소가 페이드 아웃 fadeToggle()되면 페이드 인됩니다.
요소가 페이드 인 fadeToggle()되면 페이드 아웃됩니다.
통사론:
$(selector).fadeToggle(speed,callback);
선택적 속도 매개변수는 효과의 지속 시간을 지정합니다. "slow", "fast" 또는 밀리초 값을 사용할 수 있습니다.
선택적 콜백 매개변수는 페이딩이 완료된 후 실행되는 함수입니다.
다음 예는 fadeToggle()다른 매개변수를 사용하는 방법을 보여줍니다.
예시
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
jQuery fadeTo() 메서드
jQuery fadeTo()메서드는 주어진 불투명도(0과 1 사이의 값)로 페이드를 허용합니다.
통사론:
$(selector).fadeTo(speed,opacity,callback);
필요한 속도 매개변수는 효과의 지속 시간을 지정합니다. "slow", "fast" 또는 밀리초 값을 사용할 수 있습니다.
메소드 의 필수 불투명도 매개변수는 fadeTo()지정된 불투명도(0과 1 사이의 값)로 페이딩을 지정합니다.
선택적 콜백 매개변수는 함수가 완료된 후 실행할 함수입니다.
다음 예는 fadeTo()다른 매개변수를 사용하는 방법을 보여줍니다.
예시
$("button").click(function(){
$("#div1").fadeTo("slow", 0.15);
$("#div2").fadeTo("slow", 0.4);
$("#div3").fadeTo("slow", 0.7);
});
jQuery 연습
jQuery 효과 참조
모든 jQuery 효과에 대한 전체 개요를 보려면 jQuery 효과 참조 로 이동하십시오 .