제이쿼리(jQuery) - 효과 Effect

 jQuery Effect

.animate()	해당 객체의 CSS에 변화 효과 $('p').animate({CSS Map}, {options}); $('p).animate(     {color:'white', font-size : 22px},     {duration : 400, easing : 'ease-in', complete : function(){....}} ); {queue:false}
.delay()	해당 시간만큼 실행을 지연 $("div").slideDown().delay(5000).slideUp(); ▶ id div 요소를 슬라이드 다운 후 5초 후 슬라이드 업
.stop()	실행중인 애니메이션을 중지 $("div").stop(); ▶ div의 큐의 애니메이션을 멈춤
.show()	해당 요소를 보여줌 $("div").show(); ▶ div 가 나타남 $("div").show(1000); ▶ div 가 1초에 걸쳐서 나타남
.hide()	해당 요소를 숨김 $("div").hide(); ▶ div가 사라짐 $("div").show(1000); ▶ div 가 1초에 걸쳐서 사라짐
.fadeIn()	서서히 나타남 $("div").fadeIn(); ▶ div가 서서히 나타남 $("div").fadeIn("slow"); ▶ div가 천천히 서서히 나타남 $("div").fadeIn(3000); ▶ div가 3초에 걸쳐서 서서히 나타남
.fadeOut()	서서히 사라짐
.fadeToggle()	show 상태면 fadeOut() 실행 hide 상태면 fadeIn() 실행
.fadeTo()	주어진 시간동안 주어진 투명도로 변화 $("div").fadeTo("slow",0.15); ▶ 천천히 투명도 0.15 로 변화 $("div").fadeTo("slow",0.15); ▶ 천천히 투명도 0.15 로 변화
.slideDown()	선택 요소가 슬라이드 되어 내려옴 $("div").slideDown(); ▶ div가 아래로 내려옴 $("div").slideDown("slow"); ▶ div가 천천히 아래로 내려옴 $("div").slideDown(3000"); ▶ div가 3초에 걸쳐서 아래로 내려옴
.slideUp()	선택 요소가 슬라이드 되어 올라감
.slideToggle()	요소가 slideDown 상태면 slideUp() 실행 lideUp 상태면 slideDown() 실행
.queue()	애니메이션이 chain으로 연속적으로 연결될 때, 애니메이션이 아닌 실행 함수를 큐에 저장 - ex) class 속성 변경
.dequeue()	queue에 쌓여있는 나머지 함수를 실행 $("div").show("slow").animate({left:'+=200'}, 2000) ▶ id div 요소가 천천히 나타난 후, 2초간 오른쪽으로 200이동 $("div").queue(function(){  ▶ queue의 함수를 호출     $(this).addClass("newcolor"); ▶ id div 요소의 class를 newcolor 등록     $(this).dequeue();  ▶ 다음 애니메이션 실행 }); $("div").animate({left:'-=200'}, 1000); ▶ 1초간 왼쪽으로 200 이동
.clearQueue()	queue에 쌓인 것을 삭제한다. 현재 실행중인 queue는 계속 실행 $("#stop").click(function(){ ▶ id stop 요소를 클릭하면     $("div").clearQueue(); ▶ div의 queue가 비워진다. 실행중인 큐는 진행 });