티스토리 뷰

HMLT&CSS&JS/study

[모던웹] 17.11 jQuery UI Effect 프러그인 (2) – easing 플러그인 (ease)

turfrain 2014. 3. 17. 13:54


17.11  jQuery UIEffect 플러그인 (2) – easing 플러그인

1)  기존 jQuery를 사용할 때 교과 관련 메서드의 easing 속성에 문자열 

     “swing” ,”linear” 만으로 Easing을 줄수있다.

 

표17-7 다양한 종류의easing 속성

linear

swing

 

easeInElastic

easeOutElastic

easeInOutElastic

easeInBack

easeOutBack

easeInOutBack

easeInBounce

easeOutBounce

easeInOutBounce

easeInSine

easeOutSine

easeInOutSine

easeInQuad

easeOutQuad

easeInOutQuad

easeInCubic

easeOutCubic

easeInOutCubic

easeInCirc

easeOutCirc

easeInOutCirc

easeInQuart

easeOutQuart

easeInOutQuart

easeInQuint

easeOutQuint

easeInOutQuint

 

! easing.html : http://jqueryui.com/effect/#easing

 

코드17-32 easing속성을 사용한 animate()메서드

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <style>
  5.         div {
  6.             background-color:Orange;
  7.             width:150px; height:150px;
  8.             position:relative;
  9.         }
  10.     </style>
  11.     <script src="http://code.jquery.com/jquery-1.7.js"></script>
  12.     <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  13.     <script>
  14.         $(document).ready(function () {
  15.             // 이벤트를 연결합니다.
  16.             $('button').click(function () {

  17.                 // 변수를 선언합니다.
  18.                 var easing = $('select > option:selected').html();
  19.  
  20.                 // animate() 메서드를 사용합니다.
  21.                 $('div').animate({  left: '400' }, 2000, easing)
  22.                         .animate({  left: '0'   }, 1000, easing);
  23.             });
  24.         });
  25.     </script>
  26. </head>
  27. <body>
  28.     <select>
  29.         <option>linear</option>
  30.         <option>swing</option>
  31.         <option>easeInQuad</option>
  32.         <option>easeOutQuad</option>
  33.         <option>easeInOutQuad</option>
  34.         <option>easeInCubic</option>
  35.         <option>easeOutCubic</option>
  36.         <option>easeInOutCubic</option>
  37.         <option>easeInQuart</option>
  38.         <option>easeOutQuart</option>
  39.         <option>easeInOutQuart</option>
  40.         <option>easeInQuint</option>
  41.         <option>easeOutQuint</option>
  42.         <option>easeInOutQuint</option>
  43.         <option>easeInSine</option>
  44.         <option>easeOutSine</option>
  45.         <option>easeInOutSine</option>
  46.         <option>easeInExpo</option>
  47.         <option>easeOutExpo</option>
  48.         <option>easeInOutExpo</option>
  49.         <option>easeInCirc</option>
  50.         <option>easeOutCirc</option>
  51.         <option>easeInOutCirc</option>
  52.         <option>easeInElastic</option>
  53.         <option>easeOutElastic</option>
  54.         <option>easeInOutElastic</option>
  55.         <option>easeInBack</option>
  56.         <option>easeOutBack</option>
  57.         <option>easeInOutBack</option>
  58.         <option>easeInBounce</option>
  59.         <option>easeOutBounce</option>
  60.         <option>easeInOutBounce</option>
  61.     </select>
  62.     <button>MOVE</button>
  63.     <div></div>
  64. </body>
  65. </html>



코드17-32 easing속성을 사용한 animate()메서드 custom

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <style>
  5.         *{
  6.           margin:0 ; padding:0;
  7.         }

  8.         .motion {
  9.             background-color:Orange;
  10.             width:150px; height:30px;
  11.             position:relative; 
  12.                         /* 패딩값을주면 값만틈 움직임에 영향이 있습니다.
  13.                          * padding:5px 1px 1px 15px;*/         
  14.         }
  15.                
  16.         #boxs {                
  17.             background-color:#333;                 
  18.             padding : 10px 0px 10px 0px;                   
  19.             width:550px;
  20.         }
  21.     </style>
  22.     <script src="http://code.jquery.com/jquery-1.7.js"></script>
  23.     <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  24.     <script>
  25.         $(document).ready(function () {
  26.             // 이벤트를 연결합니다.
  27.             $('#btn1').click(function () {                             
  28.                                
  29.                   $('.motion').each(function (index ,domElement) {

  30.                   // 변수를 선언합니다.
  31.                      var text = $(this).text();
  32.                      var easing = text;                
  33.                                                                                
  34.                   // animate() 메서드를 사용합니다.              
  35.                   $(domElement).animate({  left: '400' }, 2000, easing)
  36.                                .delay(2000)
  37.                                .animate({  left: '0'   }, 2000, easing);
  38.                    });                            
  39.                                
  40.             });
  41.                                        
  42.         });
  43.     </script>
  44. </head>
  45. <body>
  46.     <button id="btn1">MOVE BTN</button>
  47.         <br/>   <br/>
  48.                 <div id="boxs">
  49.                     <div class="motion">linear</div>
  50.                         <br/>
  51.                         <div class="motion">swing</div>
  52.                         <br/>
  53.                         <div class="motion">easeInOutElastic</div>
  54.                         <br/>
  55.                         <div class="motion">easeInOutBack</div>
  56.                         <br/>
  57.                         <div class="motion">easeInOutBounce</div>
  58.                         <br/>
  59.                         <div class="motion">easeInOutSine</div>
  60.                         <br/>
  61.                         <div class="motion">easeInOutQuad</div>
  62.                         <br/>
  63.                         <div class="motion">easeInOutCubic</div>
  64.                         <br/>
  65.                         <div class="motion">easeInOutCirc</div>
  66.                         <br/>
  67.                         <div class="motion">easeInOutQuart</div>
  68.                         <br/>
  69.                         <div class="motion">easeInOutQuint</div>
  70.                 </div>               
  71. </body>
  72. </html>




출처 : javaScript jQuery 입문


저작자표시 비영리

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

퍼블리싱_초급 doc  (0) 2023.02.16
[모던웹]6.10~18_객체지향 프로그래밍  (0) 2014.03.17
[모던웹]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
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday