1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <script src="../js/jquery.js"></script> <style> html, body { height:100%; } .box { width:30px; height:30px; position: absolute; top: 0; left: 0; transition: all 1s; border: 1px solid #000; } </style> </head> <body> <div id="box1" class="box"></div> <div id="box2" class="box"></div> <div id="box3" class="box"></div> <script> // CSS 트랜지션 완료 감지하기 // 트랜지션을 완료하면 발생하는 단일 이벤트가 있습니다. // 모든 표준을 따르는 브라우저에서 그 이벤트는 transitionend이며, WebKit에서는 webkitTransitionEnd입니다. var transitionEnd = 'transitionend webkitTransitionEnd oTransitionEnd otransitionend'; $('.box').one(transitionEnd, function(){ console.log( this.id + "애니메이션 완료" ); }); $('body').click(function(){ $('#box1').css({ "top":100, "left":300, "transition-delay": "0.5s" }); $('#box2').css({ "top":200, "left":300, "transition-delay": "1s" }); $('#box3').css({ "top":300, "left":300, "transition-delay": "2s" }); }); // 참고 : https://developer.mozilla.org/ko/docs/Web/Guide/CSS/Using_CSS_transitions // 참고 : http://syropia.net/journal/css3-transition-callbacks-in-jquery </script> </body> </html> |
반응형
'jQuery' 카테고리의 다른 글
| [jQuery] $.makeArray - jQuery 확장집합을 배열로 변환 (0) | 2015.11.30 |
|---|---|
| [jQuery] $.param(), serialize(), serializeArray(), JSON.stringify(), JSON.parse() (1) | 2015.11.10 |
| [jQuery] addBack() - 선택된 요소의 이전 선택된 요소도 확장집합에 함께 추가 (0) | 2015.08.28 |
| [jQuery] triggerHandler - 이벤트 핸들러만 실행 (0) | 2015.08.27 |
| [jQuery] $.proxy() - 대리인을 통해 this유지 (0) | 2015.08.26 |
