[jQueryUI] 에니메이션 변화를 효과를 주며 지정

Front-End/jQueryUI

[jQueryUI] 에니메이션 변화를 효과를 주며 지정 - Easings

리딩리드 2017. 1. 11. 18:02

에니메이션 변화를 효과를 주며 지정 - easeInBounce

1. 변화

- 에니메이션 효과를 실행하는 도중에 변화를 준다

- 변화 효과 종류 : http://api.jqueryui.com/easings

2. 예 - easeInBounce

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <style> #box{ width:100px; height:100px; background-color: #ccc; } </style> </head> <div id="box"></div> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script> <script> $(function(){ $('#box').animate({ marginTop : '300px', marginLeft : '500px', backgroundColor : '#F00' },3000,'easeInBounce'); }); </script>

- 처음 위치에서 마진값 까지 왔다갔다 하면서 이동한다