GINS WIKI 긴스 위키

사용자 도구

사이트 도구

현재 위치: 긴스위키 GINS wiki » 개발 언어 » jquery » jQuery 재참고
추적:
language:jquery:jquery_참고

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

양쪽 이전 판이전 판
다음 판		이전 판
language:jquery:jquery_참고 [2021/06/05 19:12] – [.animate()] kieunslanguage:jquery:jquery_참고 [2024/04/23 22:44] (현재) – 바깥 편집 127.0.0.1
줄 1: 줄 1:
-~~Title:jQuery 재참고 (回帰)~~+~~Title:jQuery 재참고~~
  
 jQuery를 다시 써야할때 필요한 것을 메모해둔다. jQuery를 다시 써야할때 필요한 것을 메모해둔다.
줄 38: 줄 38:
  
 오브젝트에 움직임을 부여할때 사용하는 것으로, \\ css 속성자<sup>Property</sup>의 값<sup>Value</sup>의 값이 시간을 두고 변화 되는 것을 볼 수 있다. 오브젝트에 움직임을 부여할때 사용하는 것으로, \\ css 속성자<sup>Property</sup>의 값<sup>Value</sup>의 값이 시간을 두고 변화 되는 것을 볼 수 있다.
 +
 +  * [[https://api.jquery.com/animate/|jQuery animate()]]
  
 간단한 예시로, ''animate()''에 대해서 정리.  간단한 예시로, ''animate()''에 대해서 정리. 
줄 44: 줄 46:
  
 | {{:사진자료실:css_animate-samp-01.gif|}} | | {{:사진자료실:css_animate-samp-01.gif|}} |
 +
 +===== 샘플 페이지 작성 =====
  
 일단 박스를 선언. 일단 박스를 선언.
줄 69: 줄 73:
  
 </code> </code>
 +
 +===== 애니메이션 스크립트 추가 =====
  
 ''</html>'' 이후에 ''<script>''를 추가했다. ''</html>'' 이후에 ''<script>''를 추가했다.
 +
 +''btn_a''를 눌렀을때 ''box_move()'' 함수를 호출한다.
 +
 +<code javascript>
 +$('#btn_a').click(function () {
 +  box_move();
 +});
 +</code>
 +
 +''box_move()'' 함수를 작성
 +
 +<code javascript>
 +function box_move() {
 +  // 'sample_box' 오브젝트(사용할)를 미리 찾아둔다.
 +  var _box = $('#sample_box');
 +  
 +  // 기본 위치와 현재 화면의 width,height를 얻는다.
 +  var _pos = _box.position();
 +  var _doc_root = $(document);
 +  var _doc_w = _doc_root.width();
 +  var _doc_h = _doc_root.height();
 +
 +  //_new_x, _new_y를 랜덤하게 골라둔다.
 +  var _new_x = get_rand_int(0, _doc_w);
 +  var _new_y = get_rand_int(0, _doc_h);
 +  // 'get_rand_int' 는 아래쪽에 코드를 정리했다.
 +
 +  if (_pos.left == 50) {
 +    
 +    // left: 50px;top: 50px; <- 이부분에 변경이 가해진다.
 +    _box.animate(
 +      { left: _new_x + "px", 
 +        top: _new_y + "px" }, 
 +      200, 
 +      "easeOutBack");
 +  
 +  }
 +}
 +</code>
 +
 +===== animate() =====
 +
 +''animate()''는 
 +
 +  (html 오브젝트).animate(파라미터들)
 +
 +형식을 사용한다. 
 +
 +''(html 오브젝트)'' 는 jQuery 를 사용해서 사용할 오브젝트를 찾는다.
 +
 +''파라미터들''은 기본만 쓰거나 좀 더 많은 옵션을 넣을 수 있게 되어 있다.
 +
 +===== 1번 형식 =====
 +
 +<code>.animate( properties [, duration ] [, easing ] [, complete ] ) </code>
 +
 +  * 프로퍼티<sup>Properties</sup> : 오브젝트에서 어떤 프로퍼티<sup>Property</sup>에 애니메이션을 적용할지 적는다.
 +    * 필수 파라미터.
 +  * (Number or String) Duration : 애니메이션 지속 시간
 +    * 빼도 됨. 그럴 경우 기본값 : 400. 밀리세컨.
 +  * (String) Easing : 애니메이션 이징<sup>Easing</sup> 타입
 +    * 빼도 됨. 그럴 경우 기본값 : ''swing''
 +  * (function) 완료시 호출할 함수로 구성한다.
 +    * 빼도 됨. 그럴 경우 아무것도 안함. 기본 값: ''function() {}''
 +
 +**프로퍼티 properties**
 +
 +''properties'' 프로퍼티 설정은 json 형태로 여러 프로퍼티를 한번에 설정할 수 있다.
 +
 +<code javascript>
 +_box.animate( { left: _new_x + "px", top: _new_y + "px" }, ... );
 +</code>
 +
 +''{ 프로퍼티 : 값, 프로퍼트 : 값 }'' 형태로 값을 넣는다.
 +
 +**Duration**
 +
 +밀리세컨 단위의 숫자를 적는다. 기본값은 400.(ms)
 +
 +**Easing**
 +
 +  * 스트링형식으로 적어 보내야 하며, 
 +  * jQueryUI 를 포함시켜야 한다. 이징 파라미터가 jQueryUI 에 있음
 +
 +사용 가능한 이징(Easing), [[https://api.jqueryui.com/easings/|쓸 수 있는 이징 목록 볼 수 있음]]
 +
 +  * linear , swing , default
 +  * easeInQuad, easeOutQuad, easeInOutQuad
 +  * easeInCubic, easeOutCubic, easeInOutCubic
 +  * easeInQuart, easeOutQuart, easeInOutQuart
 +  * easeInQuint, easeOutQuint, easeInOutQuint
 +  * easeInExpo, easeOutExpo, easeInOutExpo
 +  * easeInSine, easeOutSine, easeInOutSine
 +  * easeInCirc, easeOutCirc, easeInOutCirc
 +  * easeInElastic, easeOutElastic, easeInOutElastic
 +  * easeInBack, easeOutBack, easeInOutBack
 +  * easeInBounce, easeOutBounce, easeInOutBounce
 +
 +**Complete 함수**
 +
 +<code>function() {}</code> 형식으로 작성해서 넣으면 될 것 같다.
 +
 +''_box'' 애니메이션이 끝나면 팝업이 뜨도록 complete 콜백을 추가
 +
 +<code javascript>
 +_box.animate(
 +  { left: _new_x + "px", top: _new_y + "px" },
 +  200,
 +  "easeOutBack",
 +  function() {alert('');} );
 +</code>
 +
 +===== 2번 형식 =====
 +
 +<code>.animate( properties, options )</code>
 +
 +''options''에 map 형식으로 값을 넣는다. 아래 같은 파라미터를 넣을 수 있다. ([[https://api.jquery.com/animate/#animate-properties-options|링크]]) 안써봐서 모르겠다. 정리만 해둔다.
 +
 +  * duration : 움직일시간
 +  * easing : 사용할 움직일 이징
 +  * queue : (?)
 +  * specialEasing : (?)
 +  * step : 움직임이 설정된 모든 오브젝트에 대해서 호출 된다고 한다.
 +  * ''(Function( Promise animation, Number progress, Number remainingMs))'' \\ progress : 진행상태 중에 호출되는 함수. 
 +  * ''(Function())'' \\ complete : 완료시 호출할 함수
 +  * ''(Function( Promise animation ))'' \\ start : 애니메이션 시작시 호출할 함수
 +  * ''(Function( Promise animation, Boolean jumpedToEnd ))'' \\ done : Promise 설정에서 완료시 호출할 함수
 +  * ''(Function( Promise animation, Boolean jumpedToEnd ))'' \\ fail : Promise 설정에서  실패시 호출할 함수(?)
 +  * ''(Function( Promise animation, Boolean jumpedToEnd ))'' \\ always(?)
 +
 +===== 그외 =====
 +
 +**get_rand_int()**
 +
 +<code javascript>
 +// https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/random
 +function get_rand_int(min, max) {
 +  min = Math.ceil(min);
 +  max = Math.floor(max);
 +  return Math.floor(Math.random() * (max - min)) + min; //최댓값은 제외, 최솟값은 포함
 +}
 +</code>
 +
 +
  
 ===== 샘플 코드 전체 ===== ===== 샘플 코드 전체 =====
language/jquery/jquery_참고.1622887977.txt.gz · 마지막으로 수정됨: 2024/04/23 22:43 (바깥 편집)