본문 바로가기

IT/JQUERY

Jquery API 효과 정리

Jquery API 함수

jquey에서 재공하는 함수에 대해 간단히 알아보자


**.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초 후 슬라이드 업 한다.

**.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이동한다