[Effect] JQ - fadeToggle() 메서드 ★ - fadeIn(), fadeOut() 메서드 상호 전환. (= fadeToggle메서드 = 페이드토글메서드)

목차

1. fadeToggle() 예제 - fade 속도 비교.
2. fadeToggle() 정의
3. fadeToggle() 구문
4. fadeToggle() 예제 - speed, easing 매개변수
5. fadeToggle() 예제 - callback 매개변수

fadeToggle() 예제 - fade 속도 비교.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("button").click(function(){

        $("#hz1").fadeToggle();

        $("#hz2").fadeToggle("slow");

        $("#hz3").fadeToggle(2000);

    });

});

</script>

<style>
#hz1, #hz2, #hz3 { width:300px;height:80px; line-height:80px; text-align:center; color:white;}
#hz1 {background-color:red}
#hz2 {background-color:green;}
#hz3 {background-color:blue;}
</style>

 

<button>클릭</button>

<div id="hz1">홈짱닷컴 (Homzzang.com)</div>

<div id="hz2">홈짱닷컴 (Homzzang.com)</div>

<div id="hz3">홈짱닷컴 (Homzzang.com)</div>

결과보기

fadeToggle() 정의

fadeIn() 메서드와 fadeOut() 메서드를 상호전환시킴.

 

---

 

1.

faded out  (= 천천히 사라짐) 상태면, fade in (= 천천히 나타남) 상태로 만듦.

faded in (= 천천히 나타남) 상태면, fade out (= 천천히 사라짐) 상태로 만듦.

2. 

숨겨진 요소는 더 이상 안 보이며, 레이아웃에 영향 안 미침.

 

fadeToggle() 구문

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

 

---

[매개변수]

speed
선택. 동작 완료에 걸리는 시간.  (기본값: 400)
3가지료 표현 가능. (※ slow, fast 적을 땐 따옴표로 묶음.)
"slow"
"fast"
1/1000 초 (= 밀리초). (1초 = 1000)

easing
선택. 속도 변경 방법. (기본값: swing) ※ 가능값은 아래와 같음.

swing : 시작/끝은 더 느리게. 중간에선 더 빠르게. (기본값)

linear : 똑같은 속도 유지.

※ 그외도 많은데, 이건 구글링. ㅡㅡ; 

callback
선택. 동작 완료 후, 실행시킬 함수. (= 콜백함수)

 

fadeToggle() 예제 - speed, easing 매개변수

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("#btn1").click(function(){

    $("#p1").fadeToggle(2500)

  });

  $("#btn2").click(function(){

    $("#p2").fadeToggle("slow", "linear");

  });

  $("#btn3").click(function(){

    $("#p3").fadeToggle("fast");

  });

});

</script>

<button id="btn1">fadeToggle(2500)</button>

<button id="btn2">fadeToggle("slow", "linear")/button>

<button id="btn3">fadeToggle("fast")</button>

<p id="p1">홈짱닷컴 Homzzang.com</p>

<p id="p2">홈페이지 제작관리 강의</p>

<p id="p3">코딩언어 그누보드 강의</p>

 

결과보기

fadeToggle() 예제 - callback 매개변수

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    $("p").fadeToggle("slow", function(){

      alert("fadeToggle 완료.");

    });

  });

});

</script>

<button>클릭</button>

<p>홈짱닷컴 Homzzang.com</p>

 

결과보기