jQuery - 페이드토글(fadeToggle) 사용 및 실행 후 다른 코드 실행(callback)

2022. 5. 12. 16:07

▶ fadeToggle 메서드

💻 예제 설명

이 fadeToggle 메서드는 fadeIn | fadeOut 메서드의 기능을 합친 것이라고 생각하면 된다.

fadeToggle 기능을 하는 버튼 태그를 하나 만들어서 버튼을 클릭할 때마다

fadeToggle() 메서드를 실행해서 서서히 fadeIn 되었다가 다시 한 번 버튼을 클릭하면

서서히 fadeOut이 된다.

fadeToggle 메서드를 실행하면

fadeIn 이 먼저 실행이 될 거냐?

fadeOut이 먼저 실행이 될 거냐?

이건 fadeToggle의 기능을 사용하려는 요소가 현재 상태가 어떤지에 따라 결정된다.

즉, 요소의 display 상태가 none 상태이냐 아니냐에 따라 결정된다.

처음부터 요소가 보인 상태라면, 이 요소에 fadeToggle()을 실행하면 fadeOut 행동을 하게 된다.

처음부터 요소가 보이지 않는 상태라면, 이 요소에 fadeToggle()을 실행하면 fadeIn 행동을 하게 된다.

속성 옵션을 사용하면 좀 더 세밀하게 또는 좀 더 고급진 제어가 가능하다.

속성옵션 사용법 보러가기 ☜

Syntax

$('선택요소').fadeToggle();
$('선택요소').fadeToggle(speed, callback);

🖥 소스 예제

1) $('선택요소').fadeToggle();

1 - 1) 사용방법 Syntax

  // 일반적인 사용법
  $("div").fadeToggle(); // 그냥 옵션 없이 사용
  $("div").fadeToggle("slow"); // slow 라는 속도 속성을 이용한 사용
  $("div").fadeToggle(3000); // 밀리세컨즈(1000 = 1초) 속도 속성을 이용한 사용

1 - 2 ) 예제

<!DOCTYPE html>
<html>
  <head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <style>
	div{
    	width:150px;
        height:150px;
        background-color:#3242a8;
    }
  </style>
  <script>
  $(document).ready(function(){
    $("button").click(function(){
      $("div").fadeToggle();
    });
  });
  </script>
  </head>

  <body>
    <button>fadeToggle 버튼</button>

    <hr>
    <div></div>
  </body>

</html>

2) $('선택요소').fadeToggle(speed, callback);

speed : 'slow', 'fast', 숫자(밀리 세컨즈 1000 = 1초)
callback : toggle 메서드가 실행이 완료가 된 후 callback이라는 함수를 실행

2 - 1) 사용법 Syntax

  // speed : 'slow', 'fast', 밀리세컨즈 (1000 = 1초)
  
$("div").fadeToggle(1500, function(){
	alert('1.5초 후에 fadeToggle 행동이 끝나면 이 알럿창이 호출됩니다.')
});

2 - 2) 예제 (처음 요소가 보이는 상태)

<!DOCTYPE html>
<html>
  <head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <style>
	div{
    	width:150px;
        height:150px;
        background-color:#3242a8;
    }
  </style>
  <script>
  $(document).ready(function(){
    $("button").click(function(){
      $("div").fadeToggle(1500, function(){
         alert('1.5초 후에 fadeToggle 행동이 끝나면 이 알럿창이 호출됩니다.')
      });
    });
  });
  </script>
  </head>

  <body>
    <button>fadeToggle 버튼</button>

    <hr>
    <div></div>
  </body>

</html>

💻 예제 구동 설명

1 - 2) 예제 ☜

// 버튼에 이벤트 등록
$("button").click(function(){
   $("div").fadeToggle(); // 페이드토글 메서드 실행
});

fadeToggle 버튼 태그에 클릭 이벤트를 등록해서 클릭될 때마다 fadeToggle() 메서드를 실행하게 된다.

결과 화면처럼 처음 요소가 보인 상태에서 fadeToggle() 메서드를 실행하였더니

fadeOut 효과의 행동을 진행하면서 서서히 없어졌다.

그리고 다시 fadeToggle 버튼을 클릭하게 되면 fadeIn 효과가 진행되면서 서서히 요소가 보인다.

2 - 2) 예제 ☜

fadeToggle 버튼을 클릭하면 위 이미지 순서처럼

처음 보인 요소(div)가 중간 이미지 보면 서서히 흐려지면서 fadeOut 행동을 진행하고 있고

이 fadeOut 행동이 종료가 되면 위 소스에 callback 함수를 실행하게 되는데,

이 callback 함수에 alert 함수를 정의해 놔서 이렇게 알럿 창이 호출이 된다.

다시 정리해서,

fadeToggle 버튼을 클릭하면 fadeToggle() 메서드가 실행되어

네모 박스(div) 요소가 처음부터 보이는 상태였기 때문에

fadeToggle 메서드는 fadeOut 행위를 시도하고,

이 fadeOut 행위가 완료가 되면 callback 함수를 호출하게 된다.

저작자표시 비영리 변경금지

'web 언어 > jQuery' 카테고리의 다른 글

jQuery - slideDown(슬라이드다운) 메서드, 실행 후 다른 코드 실행(callback) (0)	2022.05.16
jQuery - 불투명 조절 (fadeTo) 메서드, 실행 후 다른 코드 실행 (callback) (0)	2022.05.13
jQuery - 페이드인(fadeIn), 페이드아웃(fadeOut), 메서드 실행 후 다른 코드 실행(callback) (0)	2022.05.11
jQuery - toggle() 메서드, 실행 후 다른 코드 실행(callback) (0)	2022.05.11
jQuery - show() 메서드, 실행 후 다른 코드 실행 (callback) (0)	2022.05.10

열공의 기록