프리랜서 웹디자이너 무료폰트 RELATION.CO.KR

RELATION 로고

홈페이지 소스

[JQUERY] jquery animation() 제이쿼리 에니메이션

2018.12.20
jquery animation()

** 기본
$("ID1").click(function(){
$("ID2").animate({left:''250px"});
});



** 복수 속성 적용
$("ID1").click(function(){
$("ID2").animate({l
left : '250px',
opacity:'0.5',
width:'150px,
height:'150px',
});
});



** 상대값을 사용한 animation
가지고 있는 값에 +=, -=을 붙여서 적용
$("ID1").click(function(){
$("ID2").animate({l
left : '250px',
opacity:'0.5',
width:'+=150px, //현재 width 값에 +150px
height:'-=150px', //현재 height 값에 +150px
});
});


** Pre-defined 값을 이용한 animation
숫자값을 가진 속성은 show, hide, toggle 이라는 문자열을 속성값으로 입력 할 수 있습니다.
아래와 같이 height:'toggle'로 입력 할 경우 해당 요소가 보이기/숨기기를 toggle 한다.
height:'hide' 는 height:'0px' 과 동일한 동작을 한다.
$("ID1").click(function(){
$("ID2").animate({l
height:'toggle'
// height:'show'
//height:'hide'
});
});


** 큐 기능을 이용한 animation
여러 애니메이셔니 서로 호출 하게 하는 경우 사용
애니메이션 순차적으로 실행딘다.
$("ID1").click(function(){
var div=$("DIV")
div.animate({height:'300px', opacity:'0.4'},"slow");
div.animate({width:'300px', opacity:'0.8'},"slow");
div.animate({height:'100px', opacity:'0.4'},"slow");
div.animate({width:'300px', opacity:'0.4'},"slow");
});


** 텍스트를 가진 animation
폰트가 커지는 애니메이션

$("DIV").click(function(){

var div =$("DIV");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});

이 포스트 공유하기

글수정  글삭제 전체목록