jQuery 페이드 인 및 페이드 아웃
jQuery 효과 - Fade
jQuery를 사용하면 요소의 페이드 효과를 얻을 수 있습니다.
시간은 소중하기 때문에 빠르고 편리한 학습 방법을 제공합니다.
초보 튜토리얼에서는 필요한 지식을 배울 수 있습니다.
Example
jQuery fadeIn()
jQuery fadeIn() 메서드를 보여줍니다.
jQuery fadeOut()
jQuery fadeOut() 메서드를 보여줍니다.
jQuery
fadeToggle()
jQuery fadeToggle() 메서드를 보여줍니다.
jQuery fadeTo()
jQuery fadeTo() 메서드를 보여줍니다.
jQuery 페이딩 방법
jQuery를 사용하면 요소의 페이딩 효과를 얻을 수 있습니다.
jQuery에는 다음 네 가지 페이드 메서드가 있습니다.
- fadeIn()
- fadeOut()
- fadeToggle()
- fadeTo()
jQuery fadeIn() 메서드
jQuery fadeIn()은 페이드에 사용됩니다. 숨겨진 요소에서.
구문:
선택적인 속도 매개변수는 효과의 지속 시간을 지정합니다. "느림", "빠름" 또는 밀리초 값을 사용할 수 있습니다. .
선택적인 콜백 매개변수는 페이딩이 완료된 후 실행될 함수의 이름입니다.
다음 예제는 다양한 매개 변수를 사용하는 fadeIn() 메서드를 보여줍니다.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
</script>
</head>
<body>
<p>以下实例演示了 fadeIn() 使用了不同参数的效果。</p>
<button>点击淡入 div 元素。</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>
</html>Run Instance»
온라인 예제를 보려면 "인스턴스 실행" 버튼을 클릭하세요
jQuery fadeOut ( ) 메소드
jQuery fadeOut() 메소드는 보이는 요소를 페이드 아웃하는 데 사용됩니다.
구문:
선택적인 속도 매개변수는 효과의 지속 시간을 지정합니다. "느림", "빠름" 또는 밀리초 값을 사용할 수 있습니다.
선택적인 콜백 매개변수는 페이딩이 완료된 후 실행될 함수의 이름입니다.
다음 예에서는 다양한 매개 변수를 사용하는 fadeOut() 메서드를 보여줍니다.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
});
</script>
</head>
<body>
<p>以下实例演示了 fadeOut() 使用了不同参数的效果。</p>
<button>点击淡出 div 元素。</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>인스턴스 실행 »
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
jQuery fadeToggle() 메서드
jQuery fadeToggle() 메서드는 fadeIn()과 fadeOut() 메서드 사이를 전환할 수 있습니다.
fadeToggle()은 이미 페이드 아웃된 요소에 페이드 인 효과를 추가합니다.
fadeToggle()은 이미 페이드 인된 요소에 페이드 아웃 효과를 추가합니다.
구문:
선택적인 속도 매개변수는 효과의 지속 시간을 지정합니다. "느림", "빠름" 또는 밀리초 값을 사용할 수 있습니다.
선택적인 콜백 매개변수는 페이딩이 완료된 후 실행될 함수의 이름입니다.
다음 예제는 다양한 매개 변수를 사용하는 fadeToggle() 메서드를 보여줍니다.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
</script>
</head>
<body>
<p>实例演示了 fadeToggle() 使用了不同的 speed(速度) 参数。</p>
<button>点击淡入/淡出</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>Run Instance»
온라인 예제를 보려면 "인스턴스 실행" 버튼을 클릭하세요
jQuery fadeTo() method
jQuery fadeTo() 메서드를 사용하면 지정된 불투명도(0에서 1 사이의 값)로 페이드할 수 있습니다.
구문:
필수 속도 매개변수는 효과의 지속 시간을 지정합니다. "느림", "빠름" 또는 밀리초 값을 사용할 수 있습니다.
fadeTo() 메서드의 필수 불투명도 매개변수는 페이드 효과를 지정된 불투명도(0에서 1 사이의 값)로 설정합니다.
선택적 콜백 매개변수는 함수가 완료된 후 실행될 함수의 이름입니다.
다음 예는 다양한 매개변수를 사용하는 fadeTo() 메소드를 보여줍니다.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
});
</script>
</head>
<body>
<p>演示 fadeTo() 使用不同参数</p>
<button>点我让颜色变淡</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>인스턴스 실행 »
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
