[Effect] JQ - toggle() 메서드(effect경우) ★★★★★ - 보이기/숨기기 상호전환. (= toggle메서드 = 토글 메서드)

목차

1. toggle() 예제 - button 클릭 시 p 요소 토글.
2. toggle() 정의
3. toggle() 구문
4. toggle() 예제 - speed 매개변수
5. toggle() 예제 - speed 매개변수 + 콜백함수

toggle() 예제 - button 클릭 시 p 요소 토글.

 

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

<script>

$(document).ready(function(){

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

    $("p").toggle();

  });

});

</script>

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

<button>클릭</button>

 

결과보기

toggle() 정의

 

선택요소에 대해 숨기기/보이기 상호전환. 

즉, hide(), show() 상호 전환됨.

 

---

1.

요소가 숨겨진 경우, show() 실행.
요소가 노출된 경우, hide() 실행. 

2.

숨겨진 요소는 전혀 표시되지 않음. (더 이상 페이지 레이아웃에 영향 안 미침)

 

3.

이 방법 사용해 사용자 정의 함수 상호 전환 가능.

  

toggle() 구문

 

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

 

---

[매개변수]

 

speed

선택. hide/show 효과 속도. (아래 예제1)

가능값 종류

milliseconds (예: 1000 = 1초)

"slow"

"fast"

 

easing

선택. 애니메이션의 다른 지점에서 요소의 속도를 지정. (기본값: "swing")

가능값 종류

"swing" : 시작/끝 부분은 좀 더 느리게, 중간에선 좀 더 빠르게 이동.

"linear" : 일정한 속도로 이동.

팁 : 외부 플러그인에서 더 많은 easing 기능 사용 가능.

 

callback

선택. toggle () 메소드가 완료된 후 실행될 함수. (아래 예제2)

https://homzzang.com/b/jquery-23

toggle() 예제 - speed 매개변수

 

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

 

<script>

$(document).ready(function(){

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

    $("p").toggle(1000);

  });

});

</script>

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

<button>클릭</button>

 

결과보기

toggle() 예제 - speed 매개변수 + 콜백함수

 

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

 

<script>

$(document).ready(function(){

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

    $("p").toggle(1000, function(){

      alert("toggle() method 완료");

    });

  });

});

</script>

 

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

<button>클릭</button>

 

결과보기