티스토리 뷰

jQuery/Effects

jQuery: Fading

carrot62 2020. 7. 30. 16:30
  • fadeIn: 안 보이던 element 화면에 서서히 나타낼 때 사용한다 
    • speed: 그냥 비워둬도 되고, "slow" 처럼 속성을 적어도 되고, 아니면 milliseconds로 표기해도 된다.
$(selector).fadeIn(speed,callback);

예제)

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
  });
});
</script>
</head>
<body>

<p>Demonstrate fadeIn() with different parameters.</p>

<button>Click to fade in boxes</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
  • fadeToggle: 한번 클릭하면 fadeIn, 한번 더 하면 fadeOut 작업을 실행한다
  • fadeTo: 특정 투명도를 향해 fading 된다, opacity 속성이 추가되어 있다
$(selector).fadeTo(speed,opacity,callback);

 

'jQuery > Effects' 카테고리의 다른 글

jQuery: animate, stop, chaining  (0) 2020.07.30
jQuery: sliding  (0) 2020.07.30
jQuery: hide, show, toggle, callback functions  (0) 2020.07.30