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가 비워진다. 실행중인 큐는 진행 }); |
반응형