[jQuery] #9 Add 클래스 : 클래스 추가하기

먼저 결과물부터 확인해보자.

 

 위의 사진처럼 CSS에서 효과를 주고 싶을 때 제이쿼리를 활용하여 존재하지 않는 클래스에 CSS를 삽입해둔 뒤 필요할 때 클래스를 생성해서 효과를 주는 방식을 사용할 수 있다.

 이 때 사용하는 게 addClass 메서드이다.

 

 사용하는 방식은 생각보다 간단하다.

 우선 CSS로 존재하지 않는 open이라는 클래스에 스타일을 적용해두었다.

#box.open #startBtn {
    left: -100%;
    transition: .4s ease;
}

#box.open img {
    opacity: 1;
    transform: scale(1);
    transition: .2s ease;
}

 

 그리고 jQuery를 활용하여 버튼과 이미지를 누를 때마다 class를 생성하고 지우는 것을 반복하면 open이란 클래스의 효과를 주었다가 삭제했다가를 할 수 있는 것이다.

 생성할 때는 addClass() / 삭제할 때는 removeClass() 메서드를 활용한다.

<script>
    $("#startBtn").click(function(){
        $("#box").addClass("open");
    }); // click end

    $("img").click(function(){
        $("#box").removeClass("open");
    }); // click end

</script>

open 클래스가 생성되었다가 삭제되는 것을 확인할 수 있다