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이동한다
'IT > JQUERY' 카테고리의 다른 글
체크박스 사용시에 많이 쓰이는 소스정리 (0) | 2015.04.14 |
---|---|
select box사용시 까먹는 소스 (0) | 2015.04.14 |
jquery swipe 예제 (0) | 2014.12.20 |
jquery로 div 접었다 폈다 기능 초간단 팁도 아닙니다. ^^ (0) | 2014.10.31 |
jquery hover 사용법 (0) | 2014.10.20 |