시사 JQuery - CSS Styling / Effects & Custom Animations

CSS Styling

addClass()

addClass("클래스이름") : 특정한 클래스를 노드에 추가.

removeClass()

removeClass("클래스 이름") : 특정한 클래스를 요소에서 제거.

css()

css() : 특정 속성 값을 반환하거나 변경할 수 있음. css("color");  //글자색을 반환  return값이 문자열 css("color","#f00");  // 글자색을 #f00 으로변경  (return값 jQuery) css({"color":"#f00","background-color","#00f"}); //글자색과 배경색을 변경 (json 타입)

hasClass()

hasClass("클래스 이름") : 특정한 클래스가 있는지  찾음.

Effects & Custom Animations

1. effect 함수에 사용되는 매개 변수.

duration 

duration - 시간 값으로 1/1000 밀리세컨트 단위. "slow", "normal", "fast" 로도 가능   ↕           ↕             ↕         (600)      (400)        (200) 밀리 세컨드

easing 

easing - 가속도와 관련. 단 jQuery ui 포함하여야만 사용 가능.

callback 

callback - 이펙트 애니메이션 효과가 완료 된 후 자동으로 호출되는 함수 의미 $("div").animate({"list":"50"},500,function(){ 실행할 함수 내용 });

2.Basic

hide() : 노드의 width, height, opacity를 최종적으로 0으로 지정된 시간 동안 

    변경후 display:none; 으로 변경.

show() : 노드의 width, height, opacity를 지정된 시간 동안 원래대로 돌리고,

display 상태를 원래대로 변경

toggle() : hide()와 show()를 번걸아 실행시켜주는 함수.

3.Fading

fadeIn()  : opacity 0에서 1로 전환하여 서서히 나타나게 함.  

display:block; 또는 inline으로 설정됨. 

(콜백함수 ([number duration]),[callback funtion]) - [수치 시간],[콜백]

fadeOut() : opactiy 1에서 0으로 전환하여 서서리 사라지게 함.

dispaly:none; 으로 설정됨

fadeToggle() : fadeIn() 과 fadeOut()를 번갈아 가며 실행.

fadeTo() : opacity 지정하여 fade 실행. 반드시 duration(기간) 명시해야 함.

display 상태를 변경하지는 않음.