티스토리 뷰

HMLT&CSS&JS/jQuery

# chapter17 효과

turfrain 2012. 12. 21. 18:29

출처 : javaScript jQuery 입문


T17-1  jQuery 기본 효과

show (speed,[callback])

 문서 객체를 크게 하며 보여줌

hide (speed,[callback])

 문서 객체를 작게 하며 사라짐

toggle (speed,[callback])

 Show(), hide()번갈아 실행함

slideDown (speed,[callback])

 문서 객체를 슬라이드 효과와 함께 보여줌

slideUp (speed,[callback])

 문서 객체를 슬라이드 효과와 함께 사라짐

slideToggle (speed,[callback])

 slideDown(),slideUp() 메서드를 번갈아 실행함

fadeIn (speed,[callback]))

 문서 객체를 선명하게 하며 보여줌.

fadeOut (speed,[callback])

 문서 객체를 흐리게 하며 사라지게 함

fadeToggle([duration] [,easing] [,callback])

 fadeIn(),fadeOut() 메서드를 번갈아 실행함

 

 

17.1 저수준의 시각적 효과

1) speed : 밀리초 단위의 숫자나 문자열 slow, normal, fast 를 입력합니다.

2) callback : 효교과를 모두 완료한 후에 실행 할 함수를 지정합니다.

3) easing : 애니메이션 easing속성을 지정합니다. 기본 (linear,swing)

 

코드 17-3 hide()메소드와show()메소드

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <script src="http://code.jquery.com/jquery-1.7.js"></script>
  5.     <script>
  6.         $(document).ready(function () {
  7.             $('h1').toggle(function () {
  8.                                 // next() =>  #next1
  9.                 $(this).next().hide('slow');
  10.             }, function () {
  11.                                 // next() =>  #next2
  12.                 $(this).next().show('slow');
  13.             });
  14.         });
  15.     </script>
  16. </head>
  17. <body>
  18.     <h1>OPEN & CLOSE</h1>
  19.     <div id="next1">
  20.         <h1>Lorem ipsum</h1>
  21.         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  22.     </div>
  23.     <h1>OPEN & CLOSE</h1>
  24.     <div id="next2">
  25.         <h1>Lorem ipsum</h1>
  26.         <p>Aenean vel augue dolor, at rhoncus tortor.</p>
  27.     </div>
  28. </body>
  29. </html>

 

17.2 Innerfade 플러그인

1) 간단한 화면 전환 효과

2) http://medienfreunde.com/lab/innerfade/

 

표17-2 innerfade() 메소드의 옵션 객체 속성

animationtype

내용의 변경 효과

 fade, slide

speed

  내용의 변경 속도

 slow , normal, fast , 숫자

timeout

   변경 효과가 적용되는 속도

 숫자 (2000)기본값

type

내용의 변경 방식

 Sequence, random, random_start

containerheight

내용의 높이

 auto , 숫자

 

코드 17-7 innerfade()메서드

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <style>
  5.         * { margin:0px; padding:0px; }
  6.         ul { list-style:none; }
  7.         img { width:500px; height:350px; }
  8.     </style>
  9.     <script src="http://code.jquery.com/jquery-1.7.js"></script>
  10.     <script src="jquery.innerfade.js"></script>
  11.     <script>
  12.         $(document).ready(function () {
  13.             // innerfade 플러그인을 적용합니다.
  14.             $('#inner_fade').innerfade({
  15.                 animationtype: 'fade',
  16.                 speed: 750,
  17.                 timeout: 2000,
  18.                 type: 'random',
  19.                 containerheight: '350px'                               
  20.             });
  21.         });
  22.     </script>
  23. </head>
  24. <body>
  25.     <ul id="inner_fade">
  26.         <li><img src="Chrysanthemum.jpg"/></li>
  27.         <li><img src="Desert.jpg"/></li>
  28.         <li><img src="Hydrangeas.jpg"/></li>
  29.         <li><img src="Jellyfish.jpg"/></li>
  30.         <li><img src="Koala.jpg"/></li>
  31.         <li><img src="Lighthouse.jpg"/></li>
  32.         <li><img src="Penguins.jpg"/></li>
  33.     </ul>
  34. </body>
  35. </html>



17.3 사용자 지정 효과

표17-3 jQuery 사용자 지정 효과 메서드

animate(params , duration, easing, callback)

사용자 지정 효과를 생성함.

1)    params : opacity , top , left, right , bottom , height , width , margin , padding

 

 

코드 17-10 animate()메서드

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <style>
  5.         div {
  6.             width:50px; height:50px;
  7.             background-color:Orange;
  8.             position:relative;
  9.                         border: 1px #ff0000 solid;
  10.         }
  11.     </style>
  12.     <script src="http://code.jquery.com/jquery-1.7.js"></script>
  13.     <script>
  14.         $(document).ready(function () {
  15.             $('div').toggle(function () {
  16.                 $(this).animate({    left: 500    }, 'slow');
  17.             },
  18.                         function () {
  19.                 $(this).animate({    left: 0      }, 'fade');
  20.             });
  21.         });
  22.     </script>
  23. </head>
  24. <body> 
  25.     <div>클릭</div>
  26.     <div>클릭</div>
  27.     <div>클릭</div>
  28. </body>
  29. </html>



17.4 상대적 애니메이션

1) 현재 스타일 속성을 알아내 추가 값을 부여해 상대적으로 애니메이션을 적용

 

코드 17-15 현재 상태를 기준으로한 상대적 애니메이션

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <style>
  5.         div {
  6.             width:50px; height:50px;
  7.             background-color:Orange;
  8.         }
  9.     </style>
  10.     <script src="http://code.jquery.com/jquery-1.7.js"></script>
  11.     <script>
  12.         $(document).ready(function () {
  13.             $('div').click(function () {
  14.                 // animate() 메서드를 사용합니다.  현재크기를 참고로 계속 커짐
  15.                 $(this).animate({     width: '+=50',       height: '+=50'       }, 'slow');
  16.             });
  17.         });
  18.     </script>
  19. </head>
  20. <body>
  21.     <div>계속 커짐</div>
  22. </body>
  23. </html>


T17-4~6  jQuery 메서드 (효과)

clearQueue()

 효과 애니메이션 큐의 내용을 제거함.

stop(clearQueue , goToEnd)

 효과와 애니메이션을 정지함 (애니메이션 큐 남은 것을 실행)

delay( duration [,queueName])

 큐에 있는 명령을 일정 시간뒤에 실행하게 함.

 


17.5 애니메이션 큐

1) 이해 : stop(clearQueue , goToEnd) 

2) 선택된 엘리먼트의 애니메이션이 엘리먼트 기준으로 큐에 쌓인다.

그림1


 






3) 실행될 때는 애니메이션 큐에 먼저 들어간 것 부터 실행된다.

그림2






4) clearQueue()는 큐의 내용을 삭제 한다.

 

  코드 17-16

 

  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.             $('#move').click(function () {

  15.                  // +=100 (현재 에서 100 만큼 변화) 체이닝
  16.                 $(this).animate({ left:     '+=100' }, 2000)
  17.                        .animate({ width:    '+=100' }, 2000)
  18.                        .animate({ height:   '+=100' }, 2000);
  19.             });
  20.                        
  21.                        
  22.                // #move 큐 삭제
  23.                $('#btn').click(function () {
  24.                $('#move').clearQueue();
  25.             });
  26.                        
  27.                // #move 실행 애니메이션 중지
  28.                $('#stop').click(function () {
  29.                $('#move').stop();
  30.             });
  31.                        
  32.         });
  33.     </script>
  34. </head>
  35. <body>
  36.         <button id="queue"> 큐삭제 : clearQueue() </button> 
            <button id="stop">  멈춤   : stop()       </button>
  37.         <p>
  38.     <div id="move">클릭움직임</div>
  39. </body>
  40. </html>

 

Q. 체이닝을 하지 않을 때 결과?



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>





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. 멈추는 시간없이 순차적으로 바로 실행하려면…?




17.8 jQuery Approach플러그인

 1) jQuery Approach 플러그인은 마우스의 거리를 사용해 애니메이션을 발쌩시키는 플러그인

 2) 다운로드 : http://srobbin.com/jquery-plugins/jquery-approach/

 3) approach({ 스타일 } , 효과 적용거리 )

 

코드 17-25 approach()

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

  6.         body { background:0x555; }

  7.         #circle_wrapper {
  8.             padding:10px;
  9.             background-color:Black;
  10.             overflow:hidden;
  11.         }
  12.         .circle {
  13.             margin:5px;
  14.             width:50px; height:50px;
  15.             border-radius:25px;
  16.             background-color:White;
  17.             float:left;
  18.         }
  19.     </style>
  20.     <script src="http://code.jquery.com/jquery-1.7.js"></script>
  21.     <script src="jquery.approach.js"></script>
  22.     <script>
  23.         $(document).ready(function () {

  24.             var $div ="<div class='circle'></div>";                
  25.             for (i = 0; i < 10; ++i) {
  26.                 $("#circle_wrapper").append($div);
  27.             }
  28.                        
  29.             /*
  30.              *  첫번째 : 마우스 위치에 따라 변경될 속성
  31.              *  두번째 : 마우스 위치에 따라 젹용되는 범위
  32.              */                      
  33.                        
  34.             /*  type 1 */
  35.             $('.circle').approach({ opacity: 0.2 }, 200);
  36.                     
  37.                        
  38.             /*  type 2  크기에따른 움직임                         
  39.             */
  40.         });
  41.     </script>
  42. </head>
  43. <body>
  44.     <div id="circle_wrapper">       
  45.     </div>
  46. </body>
  47. </html>

 

 Q. 속성값을크기로 변경 해보기?




17.9 jQuery UI Effect 플러그인 다운로드

 1) jQuery UI플러그인 공식사이트 : http://jqueryui.com/

  2) jQuery UI Effect 기능

    ◆ 색상 애니메이션

   ◆ addClass() , removeClass(), switchClass() 메서드에 애니메이션 기능추가

     ◆ Easing 효과




17.10  jQuery UIEffect 플러그인 (1) – 색상 변환 애니메이션

1)  addClass(class,speed)메서드와 removeClass(class,speed) 메서드의애니메이션

 2) $('div').hover( over ,out );

 

코드 17-29

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <style>
  5.         .reverse {
  6.             color:White;
  7.             background-color:Black;
  8.         }
  9.     </style>
  10.     <script src="http://code.jquery.com/jquery-1.7.js"></script>
  11.     <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  12.     <script>
  13.         $(document).ready(function () {
  14.             $('div').hover(function () {
  15.                 $(this).addClass('reverse', 1000);
  16.             }, function () {
  17.                 $(this).removeClass('reverse', 1000);
  18.             });
  19.         });
  20.     </script>
  21. </head>
  22. <body>
  23.     <div>
  24.         <h1>Lorem ipsum</h1>
  25.         <p>Lorem ipsum dolor sit amet</p>
  26.     </div>
  27.     <div>
  28.         <h1>Lorem ipsum</h1>
  29.         <p>Lorem ipsum dolor sit amet</p>
  30.     </div>
  31.     <div>
  32.         <h1>Lorem ipsum</h1>
  33.         <p>Lorem ipsum dolor sit amet</p>
  34.     </div>
  35. </body>
  36. </html>

 

 

Q1. clearQueue() , stop() 사용하여 깔끔하게 수정?

   (마우스에서 벗어난 엘리먼트의 최종 실행 애니메이션만 남기려면…)

 

Q2. 크기 , 위치 변경해보기?



#. 참고사항

    addClass ,removeClass 으로 애니메이션줄때는 "코드 1"과 같이 stop(true,true) 하지않으면 

    현재 값을못찾아 애니메이션이 안될수있는 거 같습니다.

    

   하지만 "코드 2"와같이 다른 메소드들은 애니메이션 앞에 stop() 로 clearQueue 와

   goToEnd 속성을 true 줄필요가 없습니다. 애니메이션 전에 항상 stop() 이있어서 애니

   메이션 큐에 애니메이션이 쌓이지 않고 현재 값에서 다음 애니메이션으로 진행되기 때문에

   goToEnd 를 true 로 줄필요가 없습니다.


stop() 메소드 관련 내용은 http://cafe.naver.com/hjavascript/297  참고.

  

코드 1

  1.  $('div').hover(function () {                                                  
  2.                 $(this).stop(true,true).addClass('reverse', 1000);
  3.             }, function () {                   
  4.                 $(this).stop(true,true).removeClass('reverse', 1000);
  5.             });


코드 2

  1. $('div').hover(function () {                                   
  2.                 $(this).stop().fadeTo(1000, 1);
  3.             }, function () {                                           
  4.                 $(this).stop().fadeTo(1000, 0);                        
  5.             });



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>




저작자표시 비영리

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

# jQuery 회전  (0) 2013.08.07
# chapter06 객체지향 프로그래밍  (0) 2013.02.04
1. jQuery 메소드 정리  (2) 2012.09.10
1. Effects  (0) 2011.07.22
# jQuery 객체 선택자 Basic  (0) 2011.04.20
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday