[jQuery Quick API] 4.효과

[jQuery Quick API] 4.효과

4. 효과


.animate() : 해당 객체의 CSS 변화 효과를 준다.  /$('p').animate({CSS Map}, {options});

$('p).animate({color:'white', font-size : 22px}, {duration : 400, easing : 'ease-in', 

complete : function(){....}});  {queue:false}


.delay() : 해당 시간만큼 실행을 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초에 걸쳐서 사라진다.

.toggle() : 해당 요소가 show 상태면 hide() / hide 상태면 show() 실행

$("div").toggle();    // div가 hide 상태면 show() / show 상태면 hide()한다.

$("div").toggle(1000);   // div 가 1초에 걸쳐서 toggle() 한다.


.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(), slideUp 상태면 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'}, 500);  // 05초간 왼쪽으로 200 이동한다.


.clearQueue() : queue에 쌓인 것을 삭제한다. 현재 실행중인 queue는 계속 실행된다.   

$("#stop").click(function(){  // id stop 요소를 클릭하면

       $("div").clearQueue();  // div의 queue가 비워진다. 실행중인 큐는 진행한다.

});




출처: https://devbox.tistory.com/?page=15 [장인개발자를 꿈꾸는 :: 기록하는 공간] 

Facebook Twitter GooglePlus KakaoStory KakaoTalk NaverBand