DevSSOM

jQuery 이벤트 - Fade 이벤트 본문

JavaScript/jQuery

jQuery 이벤트 - Fade 이벤트

데브쏨 2021. 7. 18. 01:29
반응형

Fade 이벤트

영화에서 보여지는 Fade 효과는 다음 제이쿼리 이벤트로 쉽게 구현할 수 있음.

$("h1").fadeOut();       // 서서히 사라지게
$("h1").fadeIn();        // 서서히 나타나게
$("h1").fadeToggle();    // fadeOut과 fadeIn 둘 다

 

 

실습문제

 

HTML 실행화면

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>제이쿼리 기초</title>
</head>
<body>

    <h1 style="text-align: center">Hello jQuery</h1>

    <button id="fade-out">Fade Out</button>
    <button id="fade-in">Fade In</button>
    <button id="fade-toggle">Fade Toggle</button>
    
    <script src="jquery-3.3.1.js"></script>
    <script src="index.js"></script>

</body>
</html>

이제 저 버튼들에 fade 이벤트 기능들을 넣기 위해서 제이쿼리로 index.js 파일을 작성해주기. 가장 먼저, fade-out 버튼.

$(function() {

  $("#fade-out").click(function() {
    $("h1").fadeOut()
  });

});

나머지 버튼들도 코드를 작성해주면

$(function() {

  $("#fade-out").click(function() {
    $("h1").fadeOut();
  });
  
  $("#fade-in").click(function() {
    $("h1").fadeIn();
  });
  
  $("#fade-toggle").click(function() {
    $("h1").fadeToggle();
  });

});

이제 버튼을 누를 때마다 Hello jQuery 영역이 스스륵 없어졌다가 다시 스르륵 생기고 토글로도 스르륵 있다없다 할 수 있게 됨.

 

 

728x90
반응형
저작자표시

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

jQuery 이벤트 - Hide, Show, Toggle 이벤트  (0) 2021.07.17
jQuery 이벤트 - Mouse 이벤트  (0) 2021.07.15
jQuery 선택자  (0) 2021.07.14
jQuery 왜 쓸까?  (0) 2021.07.14
jQuery - this  (0) 2021.07.11
'JavaScript/jQuery' 관련 글 more
댓글