티스토리 뷰

HMLT&CSS&JS/study

[모던웹] 17.7 애니메이션 지연

turfrain 2014. 3. 17. 13:52


17.7 애니메이션 지연

1) delay(duration) : 메서드의 매개 변수에 정지하려는 시간을 미리초 단위로 입력

    [delay함수의 duration 파라미터 값을 미리 초단위로 입력 (1000 = 1초)]

 

코드 17-21

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <style>
  5.         div {
  6.             width:100px; height:100px;
  7.             background-color:Orange;
  8.             border:solid #ff0000;
  9.             position:relative;
  10.         }
  11.     </style>
  12.     <script src="http://code.jquery.com/jquery-1.7.js"></script>
  13.     <script>
  14.         $(document).ready(function () {
  15.                        
  16.             /* each 앞에 꺼를 반복 실행합니다. */
  17.             $('div').each(function (index ,domElement) {
  18.                                                
  19.                /* Type1 */
  20.                // (index * 500)초 후 animate() 메서드를 실행합니다.
  21.                 $(this).delay(index * 500)
  22.                        .animate({ left: 500 }, 'slow');
  23.                                
  24.                                
  25.                 /* Type2
  26.                  $(this).animate({ left: 500 }, 'slow')
  27.                         .delay(index * 500)
  28.                         .animate({ left: 250 }, 'slow');
  29.                 */
  30.                                
  31.                  /* Type3  
  32.                   $(this).delay(index * 500)
  33.                          .animate({ left: 500 }, 'slow')
  34.                          .delay(index * 500)
  35.                          .animate({ left: 250 }, 'slow');
  36.                   */
  37.                                                                
  38.                   /* Type4  순자척으로 바로 실행하려면.?                           
  39.                   */             
  40.                                
  41.                   // domElement 는  <div>0</div>....
  42.                    $(domElement).html(function(index,domElement){
  43.                                  return domElement+"☆";
  44.                    })
  45.             });   
  46.                        
  47.         });
  48.     </script>
  49. </head>
  50. <body>       
  51.     <div>0</div>
  52.     <div>1</div>
  53.     <div>2</div>
  54.     <div>3</div>
  55.     <div>4</div>
  56.     <div>5</div>
  57. </body>
  58. </html>



Q. 멈추는 시간없이 순차적으로 바로 실행하려면…?





출처 : javaScript jQuery 입문



저작자표시 비영리

'HMLT&CSS&JS > study' 카테고리의 다른 글

[모던웹]17.9 ~10 jQuery UI Effect (1) 플러그인 _ (참고사항 추가)  (0) 2014.03.17
[모던웹] 17.8 jQuery Approach플러그인  (0) 2014.03.17
[모던웹]17.6 애니메이션 정지  (0) 2014.03.17
[모던웹] 17.5 애니메이션 큐  (0) 2014.03.17
[모던 웹] 15.13 문서 객체의 삽입  (0) 2014.03.17
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday