[jQueryUI] 에니메이션 무효화

Front-End/jQueryUI

[jQueryUI] 에니메이션 무효화 - $.fx.off()

리딩리드 2017. 1. 12. 14:31

에니메이션 무효화 - $.fx.off()

1. 정의

- 성능이 낮은 환경에서 에니메이션은 부담이 될 수 있다

- 상황에 따라서 $.fx.off = true 를 적용하여 부담을 줄인다

- 해당 함수를 설정하면 에니메이션이 바로 끝난 후의 상태가 된다

2. 예제

<!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(){ $.fx.off = true; $('#box').animate({ marginTop : '300px', marginLeft : '500px' },3000); }); </script>

- 해당 위치에서 에니메이션이 끝난 상태로 바로 이동 함