[jquery & css] jquery함수를 이용하여 클래스 추가하기

jquery의 addClass() 함수 사용하기

- 참고 링크: https://api.jquery.com/addclass/

# 서두

안녕하세요 모닝버드입니다~ 오랜만에 집에 내려왔는데요. 원래는 주말동한 푹 쉬며 요양이나 하자는 마음이었는데, 막상 아무것도 안하니 시간이 아깝네요..! 그래서 노트북을 열었는데요, 프로젝트에 jquery를 사용해야 할 일이 있어서 이것 저것 서칭을 하다가 나중에 또 필요할 것 같아 포스팅으로 남깁니다.

그리고 css3의 transition 속성에 대해서도 간단히 알아보겠습니다.

# jquery의 addClass() 함수

html 태그에 새로운 클래스를 추가 할 수 있는 함수 입니다. 새로운 클래스를 추가함으로써 특정 이벤트가 발생할 시 새로운 css 속성들을 반영시킬 수 있습니다.

- 사용법

// 새로운 클래스 추가하기
$( "p" ).addClass( "new_class" );

// 반대로, 기존 클래스 삭제하기
$( "p" ).removeClass( "old_class" );

# css3의 transition 속성

이 속성은 마우스오버 :hover 혹은 jquery로 이벤트 감지시, 특정 속성에 일정 타이밍 동안 변화를 적용할 수 있습니다. 

* 참고링크: https://www.w3schools.com/css/css3_transitions.asp

- Ex1) 마우스 오버 :hover

.sb-btn-info {
  pointer-events: none;
  opacity: 0.5;
  transition: 2s;
  -webkit-transition: 2s; /* Safari & Chrome */
  -moz-transition: 2s; /* Firefox */
  -o-transition: 2s; /* Opera */
}

.sb-btn-info:info {
  opacity: 1;
}

- Ex2) 특정 이벤트 발생 시 => jquery

input .sb-btn-info {
  pointer-events: none;
  opacity: 0.5;
  transition: 2s;
  -webkit-transition: 2s; /* Safari & Chrome */
  -moz-transition: 2s; /* Firefox */
  -o-transition: 2s; /* Opera */
}
.sb-btn-info-active {
  opacity: 1;
}

$("input").click(function(){
  $('input').addClass("sb-btn-info-active");
});