• Q&A
  • 회원가입
  • 로그인

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

381  

목차

  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>

 

결과보기



찾아주셔서 감사합니다. Since 2012