JQuery - animation 이벤트(toggleClass(), trigger())

| 마우스 이벤트

 

HTML

<div id="box1"></div>
    <div id="box2"></div>
    <button>액션1</button>
    <button>액션2</button>
    <button>액션3</button>

 

CSS

* {
        margin: 1px;
      }
      body {
        overflow: hidden;
      }
      #box1 {
        height: 100px;
        background-color: coral;
        transform: translateX(-97%);
        transition: all 1s;
      }
      #box2 {
        height: 100px;
        background-color: lightblue;
        transform: translateX(97%);
        transition: all 1s;
      }
      #box1.on,
      #box2.on {
        transform: translateX(0); /*버튼 클릭 시 클래스on실행*/
      }

 

JS

 $(document).ready(function () {
        $("button:eq(0)").on("click", function () {
          $("#box1").toggleClass("on"); //버튼 클릭 시 클래스 변경
        });
        $("button:eq(1)").on("click", function () {
          $("#box2").toggleClass("on"); //버튼 클릭 시 클래스 변경
        });
        $("button:eq(2)").on("click", function () {
          $("button:eq(0)").trigger("click");
          $("button:eq(1)").trigger("click");
        });
      });

 

---

두 개의 DIV에 각각 transform 효과를 주어 크기 지정

가상의 클래스 .on 추가 >> 쿼리에서 버튼 클릭 시 해당 클래스 실행

​

$("요소.eq(숫자)") : 같은 부모의 자식 중 '숫자'번 째에 접근하여 요소를 반환

-> css의 nth-child(숫자) 와 같다.

$("요소").toggleClass("클래스명") : 특정 이벤트 실행 시 해당 클래스 명에 대한 속성 변경

$("요소").trigger("이벤트") : 강제로 이벤트를 실행시키는 함수

eq(2) 클릭시 trigger 함수로 인해 다른 두 개의 이벤트를 강제로 실행시킨다.

결과 영상 확인 : https://blog.naver.com/jun950617/222832297177

JQuery - animation 이벤트(toggleClass(), trigger())