티스토리 뷰

HMLT&CSS&JS/study

[모던웹]17.6 애니메이션 정지

turfrain 2014. 3. 17. 13:51


17.6 애니메이션 정지

1) $(selector).stop();   ==  $(selector).stop(false,false);

◆ 실행 애니메이션을 정지한다.

◆ 기본값 (false,false).

 

2) $(selector).stop(clearQueue , goToEnd); 

◆ 애니메이션큐를 삭제 한다  

◆ clearQueue : true => 효과 애니메이션 큐의내용을 제거

◆  goToEnd: true      => 실행중인 애니메이션 최종위치로바로이동

 

 코드17-20


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <style>
  5.         div {
  6.             width:100px; height:100px;
  7.             background-color:Orange;
  8.             position:relative;
  9.         }
  10.     </style>
  11.     <script src="http://code.jquery.com/jquery-1.7.js"></script>
  12.     <script>
  13.         $(document).ready(function () {
  14.             // 이벤트를 연결합니다.
  15.             $('button').click(function () {
  16.                                
  17.                 // 변수를 선언합니다.
  18.                 var html     = $(this).html();
  19.                 var evalText = "$('div')." + html;
  20.                                                
  21.                  /*     evalText?
  22.                   *  1. evalText = "$('div').stop()"
  23.                   *  2. evalText = "$('div').stop(false ,false)"
  24.                   *  3. evalText = "$('div').stop(true)"
  25.                   *  4. evalText = "$('div').stop(stop(false, true))"
  26.                   *  5. evalText = "$('div').stop(true,  true)"
  27.                    */
  28.                                
  29.                 // eval 자바스크립트 내장함수 문자열을 평가하고 스크립트 코드 인 것처럼 그것을 실행
  30.                 // http://www.w3schools.com/jsref/jsref_eval.ASP
  31.                 // 메서드를 실행합니다.
  32.                 eval(evalText);
  33.             });
  34.  
  35.             // 애니메이션을 시작합니다.
  36.             setInterval(function () {
  37.                 $('div').animate({   left: '500'   }, 1000)
  38.                         .animate({   left: '0'     }, 1000);
  39.                 }, 2000);
  40.         });
  41.     </script>
  42. </head>
  43. <body>
  44.     <button>stop()                    </button> 
           => 1. 현재 진행중인 애니메이션 삭제함니다. <br/>

  45.     <button>stop(false ,false)        </button> 
           => 2. 현재 진행중인 애니메이션 삭제함니다. <br/>

  46.     <button>stop(true)                </button> 
           => 3. 현재 애니메이션 스텍에 있는것을 모두빼버립니다.<br/>

  47.     <button>stop(false, true)         </button> 
           => 4. 진행중인 애니메이션의 최종 위치에서 시작함 (진행중인 애니메이션시간0)<br/>

  48.     <button>stop(true,  true)          </button> 
           => 5. 현재 애니메이션 스텍에 있는것을 모두빼버리고,   
                 진행중인 애니메이션의 최종 위치에서 시작함 (진행중인 애니메이션시간0)
  49.      <p>

  50.     <div>인터벌 자동실행</div>
  51. </body>
  52. </html>





출처 : 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.7 애니메이션 지연  (0) 2014.03.17
[모던웹] 17.5 애니메이션 큐  (0) 2014.03.17
[모던 웹] 15.13 문서 객체의 삽입  (0) 2014.03.17
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday