728x90
animate()메서드를 이용하면 선택한 요소에 다양한 동작 효과를 적용 할 수 있다.
( 요소를 앞으로 이동시키거나 점차 커지게하는 등)
* 기본형
| $("요소 선택").animate({스타일 속성}, 적용 시간, 가속도, 콜백함수) |
- 스타일 속성 : 애니메이션으로 적용할 스타일 속성
- 적용시간 : 동작에 반응하는데 소요되는 시간이며, 적용 시간의 옵션은 효과 함수에 적용한 것 과 같다.
* 예제
| <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title> 효과와 애니메이션 </title> <script src="js/jquery.js"></script> <script> //[버튼1]을 클릭하면 class 값이 "txt1"인 요소가 2초 동안 오른쪽 방향으로 500px만큼 이동하고 글자의 크기가 30px 커진다. 애니메이션이 완료되면 콜백함수가 실행된다. $(function(){ $(".btn1").on("click", function( ) { $(".txt1").animate({ marginLeft:"500px", fontSize:"30px" }, 2000, "linear", function( ) { alert("모션 완료!"); }); }); //[버튼2]를 클릭할때마다 class 값이 "txt2"인 요소가 1초동안 오른쪽 방향으로 50px씩 이동한다. $(".btn2").on("click", function( ) { $(".txt2").animate({ marginLeft:"+=50px" },1000); }); }); </script> <style> .txt1{background-color: aqua;} .txt2{background-color: pink;} </style> </head> <body> <p><button class="btn1">버튼1</button></p> <span class="txt1">"500px" 이동</span> <p><button class="btn2">버튼2</button></p> <span class="txt2">"50px"씩 이동</span> </body> </html> |
'내마음대로만들어보자 > JS' 카테고리의 다른 글
| queue() / dequeue() 메서드 (0) | 2021.08.25 |
|---|---|
| stop() / delay() 메서드 (0) | 2021.08.25 |
| fadeTo() 메서드 (0) | 2021.08.25 |
| 효과 및 애니메이션 메서드 (0) | 2021.08.25 |
| change() 이벤트 메서드 (0) | 2021.08.23 |