language:jquery:jquery_참고
차이
문서의 선택한 두 판 사이의 차이를 보여줍니다.
양쪽 이전 판이전 판다음 판 | 이전 판 | ||
language:jquery:jquery_참고 [2021/06/05 19:16] – [.animate()] kieuns | language:jquery:jquery_참고 [2024/04/23 22:44] (현재) – 바깥 편집 127.0.0.1 | ||
---|---|---|---|
줄 1: | 줄 1: | ||
- | ~~Title: | + | ~~Title: |
jQuery를 다시 써야할때 필요한 것을 메모해둔다. | jQuery를 다시 써야할때 필요한 것을 메모해둔다. | ||
줄 88: | 줄 88: | ||
'' | '' | ||
- | <WRAP group> | ||
- | <WRAP half column> | ||
<code javascript> | <code javascript> | ||
function box_move() { | function box_move() { | ||
+ | // ' | ||
var _box = $('# | var _box = $('# | ||
+ | | ||
+ | // 기본 위치와 현재 화면의 width, | ||
var _pos = _box.position(); | var _pos = _box.position(); | ||
var _doc_root = $(document); | var _doc_root = $(document); | ||
줄 98: | 줄 99: | ||
var _doc_h = _doc_root.height(); | var _doc_h = _doc_root.height(); | ||
+ | //_new_x, _new_y를 랜덤하게 골라둔다. | ||
var _new_x = get_rand_int(0, | var _new_x = get_rand_int(0, | ||
var _new_y = get_rand_int(0, | var _new_y = get_rand_int(0, | ||
+ | // ' | ||
if (_pos.left == 50) { | if (_pos.left == 50) { | ||
- | //_h3_a.show(); _h3_b.hide(); | + | |
+ | | ||
_box.animate( | _box.animate( | ||
{ left: _new_x + " | { left: _new_x + " | ||
줄 108: | 줄 112: | ||
200, | 200, | ||
" | " | ||
- | | + | |
- | else { // 작아지는 경우 | + | |
} | } | ||
} | } | ||
</ | </ | ||
- | </ | ||
- | <WRAP half column> | + | ===== animate() ===== |
- | </WRAP> | + | '' |
- | </WRAP> | + | |
+ | (html 오브젝트).animate(파라미터들) | ||
+ | |||
+ | 형식을 사용한다. | ||
+ | |||
+ | '' | ||
+ | |||
+ | '' | ||
+ | |||
+ | ===== 1번 형식 ===== | ||
+ | |||
+ | < | ||
+ | |||
+ | * 프로퍼티< | ||
+ | * 필수 파라미터. | ||
+ | * (Number or String) Duration : 애니메이션 지속 시간 | ||
+ | * 빼도 됨. 그럴 경우 기본값 : 400. 밀리세컨. | ||
+ | * (String) Easing : 애니메이션 이징< | ||
+ | * 빼도 됨. 그럴 경우 기본값 : '' | ||
+ | * (function) 완료시 호출할 함수로 구성한다. | ||
+ | * 빼도 됨. 그럴 경우 아무것도 안함. 기본 값: '' | ||
+ | |||
+ | **프로퍼티 properties** | ||
+ | |||
+ | '' | ||
+ | |||
+ | <code javascript> | ||
+ | _box.animate( { left: _new_x + " | ||
+ | </ | ||
+ | |||
+ | '' | ||
+ | |||
+ | **Duration** | ||
+ | |||
+ | 밀리세컨 단위의 숫자를 적는다. 기본값은 400.(ms) | ||
+ | |||
+ | **Easing** | ||
+ | |||
+ | * 스트링형식으로 적어 보내야 하며, | ||
+ | * jQueryUI 를 포함시켜야 한다. 이징 파라미터가 jQueryUI 에 있음 | ||
+ | |||
+ | 사용 가능한 이징(Easing), | ||
+ | |||
+ | * linear , swing , default | ||
+ | * easeInQuad, easeOutQuad, | ||
+ | * easeInCubic, | ||
+ | * easeInQuart, | ||
+ | * easeInQuint, | ||
+ | * easeInExpo, easeOutExpo, | ||
+ | * easeInSine, easeOutSine, | ||
+ | * easeInCirc, easeOutCirc, | ||
+ | * easeInElastic, | ||
+ | * easeInBack, easeOutBack, | ||
+ | * easeInBounce, | ||
+ | |||
+ | **Complete 함수** | ||
+ | |||
+ | < | ||
+ | |||
+ | '' | ||
+ | |||
+ | <code javascript> | ||
+ | _box.animate( | ||
+ | { left: _new_x + " | ||
+ | 200, | ||
+ | " | ||
+ | function() {alert('' | ||
+ | </ | ||
+ | |||
+ | ===== 2번 형식 ===== | ||
+ | |||
+ | < | ||
+ | |||
+ | '' | ||
+ | |||
+ | * duration : 움직일시간 | ||
+ | * easing : 사용할 움직일 이징 | ||
+ | * queue : (?) | ||
+ | * specialEasing : (?) | ||
+ | * step : 움직임이 설정된 모든 오브젝트에 대해서 호출 된다고 한다. | ||
+ | * '' | ||
+ | * '' | ||
+ | * '' | ||
+ | * '' | ||
+ | * '' | ||
+ | * '' | ||
+ | |||
+ | ===== 그외 ===== | ||
+ | |||
+ | **get_rand_int()** | ||
+ | |||
+ | <code javascript> | ||
+ | // https:// | ||
+ | function get_rand_int(min, | ||
+ | min = Math.ceil(min); | ||
+ | max = Math.floor(max); | ||
+ | return Math.floor(Math.random() * (max - min)) + min; // | ||
+ | } | ||
+ | </code> | ||
language/jquery/jquery_참고.1622888217.txt.gz · 마지막으로 수정됨: 2024/04/23 22:43 (바깥 편집)