//jQuery의 animate 메서드는 애니메이션을 만드는데 사용합니다.
//형식: $(selector).animate({params}, speed, callback);
//필수: params: Css properties to be animated
//선택: speed
//선택: callback 애니메이션이 끝났을때 실행 할 함수.
//19)오른쪽으로 250px만큼 옮기기- animate
$("button").click(function(){
$("div").animate({left: '250px'});
})
//20) 왼쪽여백을 250px주고 [결국 오른쪽으로 옮겨지는 효과]
//사이즈를 150px, 150px로 변경한다.
//주의! Http elements의 default position은 Static이다 ! [움직일 수 없다]
//따라서 이동할 element의 position은 absolute || relative || fixed 여야한다.
//주의! property의 이름은 camel-case로 씌어져야 한다. 만약 padding-left라면 paddingLeft로 작성해야 합니다!
$("button").click(function(){
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
})
})
//21) 현재 사이즈를 기준으로 점진적으로 사이즈를 늘려봅시다!
//left는 0,0을 기준으로 지정하는듯. +=하면 점진적으로 커짐.
$("button").click(function(){
$("div").animate({
left: '250px',
heifht: '+=150px',
width: '+=150px'
})
})
//22) height toggle로 글라인드를 올렸다 내렸다하는 느낌을 낼 수 있다.
//당연히 hide/show도 가능.
https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation1_toggle
$("button").click(function(){
$("div").animate({
height: 'toggle'
});
});
//23)jQuery는 Default로 애니메이션을 위한 Queue를 사용한다.
//따라서 여러개의 애니메이션을 연달아 작성하면 jQuery는 내부큐를 생성하여 애니메이션 호출을 하나씩 실행한다.
//자연스러운 애니메이션 가능!
https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation
$("button").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: '100px', opacity: '0.8'}, "slow");
})
//24) 왼쪽으로 옮기고 폰트사이즈도 키워봅시다.
//왼쪽으로
$("button").click(function(){
var div = $("div");
div.animate({left: '100px'}, "slow");
div.animate({fontSize: '3em'}, "slow");
})
//jQuery stop메서드는 애니메이션이나 효과가 끝나기 전에 멈추게 한다.
//stop메서드는 모든 jQuery effect함수[슬라이딩, 페이딩 사용자정의 애니메이션]에 사용할 수 있다.
//Syntax: $(selector).stop(stopAll, goToend);
stopAll [Optional]: animation Queue 대기열 삭제여부를 지정한다. 기본값 False
False이면 대기열은 삭제하지 않고, 활성화상태의 애니메이션만 삭제되며 나중에 수행 할 수 있다.
goToend [Optional]: 현재 애니메이션을 즉시 완료할 지 여부를 지정한다. 기본값 False
//SlideDown 이벤트 진행중에 멈추기
//https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_stop_slide
$("#flip").click(function(){
$("#pannel").slideDown(5000);
});
$("#stop").click(function(){
$("#panel").stop(); //활성화상태의 에니메이션만 즉시 삭제된다.
})
//Callback
//사용이유: 자바스크립트는 line by line으로 실행된다. effect를 사용하면 효과가 완료되지 않은 경우에도 다음 코드가 실행 될 수 있으며, 때문에 오류가 발생 할 수 있다.
이를 방지하기 위해 콜백함수를 등록할 수 있으며 현재실행중인 effect가 완료된 후 콜백 함수가 실행된다.
//상당히 흥미롭다. 콜백을 왜 쓰는지 궁금했는데.. 비동기식으로 실행되는 경우[???]를 위해 반드시 특정 동작이 끝난 직후에 실행 되도록 하는듯 하다.
//아래의 두 예제를 비교하면 그 차이가 더욱 분명하다.
//1) CallBack으로 등록 하지 않은경우https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_no_callback
//자바스크립트는 line by line으로 실행되기 때문에 p태그가 완전히 감추어진 직후에 alert가 실행 될것 같지만 실제로는 소나기마냥 오락가락한다.
$("button").click(function(){
$("p").hide(1000);
alert("The paragraph is now hidden");
})
//2) Callback으로 등록 한 경우
//우리가 원하던대로 p가 완전히 사라진 후에 alert가 실행되게 된다. 반.드.시
$("button").click(function(){
$("p").hide("slow", function(){
alert("The paragraph is now hidden")
});
})
//Chainning
//체이닝을 사용하면 단일 명령문 내에서 동일한 element에 여러개의 jQuery 메서드를 실행 할 수 있게 해준다.
//지원하지 않는 브라우저도 존재한다.
//https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_chaining2
$("button").click(function(){
$("#p1").css("color", "red")
.slideUp(2000)
.slideDown(2000);
});
댓글