jQuery 효과 - 페이드

jQuery 페이딩 방법

jQuery를 사용하면 요소의 페이딩 효과를 얻을 수 있습니다.

jQuery에는 다음 네 가지 페이드 메서드가 있습니다.

fadeIn()

fadeOut()

fadeToggle()

fadeTo()

fadeIn() 메서드

jQuery fadeIn()은 페이드 인에 사용됩니다. 숨겨진 요소.

구문:

$(selector).fadeIn(speed,callback);

선택적인 속도 매개변수는 효과의 지속 시간을 지정합니다. "느림", "빠름" 또는 밀리초 값을 사용할 수 있습니다. .

선택적인 콜백 매개변수는 페이딩이 완료된 후 실행될 함수의 이름입니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(4000);
  });
});
</script>
</head>
<body>
<button>点击淡入</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>

fadeOut() 메서드

jQuery fadeOut() 메서드는 보이는 요소를 페이드 아웃하는 데 사용됩니다.

구문:

$(selector).fadeOut(speed,callback);

선택적인 속도 매개변수는 효과의 지속 시간을 지정합니다. "느림", "빠름" 또는 밀리초 값을 사용할 수 있습니다.

선택적인 콜백 매개변수는 페이딩이 완료된 후 실행될 함수의 이름입니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(5000);
  });
});
</script>
</head>
<body>
<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>

fadeOut() 메서드

jQuery fadeOut() 메서드는 보이는 요소를 페이드 아웃하는 데 사용됩니다.

구문:

$(selector).fadeOut(speed,callback);

선택적인 속도 매개변수는 효과의 지속 시간을 지정합니다. "느림", "빠름" 또는 밀리초 값을 사용할 수 있습니다.

선택적인 콜백 매개변수는 페이딩이 완료된 후 실행될 함수의 이름입니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(4000);
  });
});
</script>
</head>
<body>
<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>

fadeToggle() 메서드

jQuery fadeToggle() 메서드는 fadeIn()과 fadeOut() 메서드 사이를 전환할 수 있습니다.

fadeToggle()은 이미 페이드 아웃된 요소에 페이드 인 효과를 추가합니다.

fadeToggle()은 이미 페이드 인된 요소에 페이드 아웃 효과를 추가합니다.

구문:

$(selector).fadeToggle(speed,callback);

선택적인 속도 매개변수는 효과의 지속 시간을 지정합니다. "느림", "빠름" 또는 밀리초 값을 사용할 수 있습니다.

선택적인 콜백 매개변수는 페이딩이 완료된 후 실행될 함수의 이름입니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $("button").click(function(){
    $("#div1").fadeToggle(1000);
    $("#div2").fadeToggle("slow");
    $("#div3").fadeToggle(4000);
    });
});
</script>
</head>
<body>
<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>

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <style type="text/css"> .big{ font-size:30px; color:#FF0000;} </style> </head> <body> <script> function fadeIn(){ $("#popup").fadeIn(2000); $("#popup").css("position","absolute"); $("#popup").css("left","100px"); $("#popup").css("top","100px"); } function fadeOut(){ $("#popup").fadeOut(2000); } function fadeTo(){ $("#popup").fadeTo(2000,0.5); } </script> <input type="button" value="弹出层" onclick="fadeIn()" > <div id="popup" style="width:200px;height:200px;border:1px red solid;display:none;background-color:red;"> 弹出层的试验 <br> <input type="button" value="取消" onclick="fadeOut()" > <input type="button" value="半透明" onclick="fadeTo()" > </div> </body> </html>

제출하다 코드 재설정

자동운전