jQuery - Effect : animate()

거의 대부분의 CSS property 에 대해 애니메이션이 가능하다.
그러나 property 이름은 camel notation으로 되어야 한다.
즉 CSS 에서 padding-left 는 jQuery 애니메이션에서는 paddingLeft 이어야 한다

또한, 기본적은 jQuery 라이브러리에선 color 애니메이션은 없다.
color 애니메이션을 하려면 추가적인 plugin을 포함해야 한다 http://plugins.jquery.com/

* animate() 함수: CSS property에 대해서 animation 수행

$(selector).animate({params},speed,callback);

---

$(document).ready(function(){

$("#btn01").click(function(){
$("div#d01").animate({left: '250px'}) 
    });

* 여러가지 애니메이션 동시에
    $("#btn02").click(function(){
     $("div#d02").animate({
        left: '250px',
        opacity: '0.5',
        height: '150px',
        width: '150px',
      })
    });

* 상대적인 값 (relative value)를 지정한 애니메이션 가능
    $("#btn03").click(function(){
     $("div#d03").animate({
        left: '250px',
        height: '+=50px',
        width: '+=50px',
       })
    });
    
* pre-defined 값 설정 가능 "show", "hide", "toggle"
    $("#btn04").click(function(){
     $("div#d04").animate({
        width: 'toggle'
       })
    });

 * 애니메이션 Queue 설정
    $("#btn05").click(function(){
     var div = $("div#d05")
     div.animate({height: '300px', opacity: '0.4'}, "slow");
     div.animate({width: '300px', opacity: '0.8'}, "slow");
     div.animate({height: '100px', opacity: '0.4'}, "slow");
     div.animate({width: '100px', opacity: '1.0'}, "slow");
    });

* #btn06 을 click() 하면  #d06 이
   1. 오른쪽으로 100px 이동하며, 동시에  width 는 200px 로 'slow' 하게 변하기
   2. 위 1. 애니메이션 끝난후 글자크기가 fontSize   3em 로 'slow' 하게 커지기  
    $("#btn06").click(function(){
     var div = $("div#d06")
        div.animate({left: '100px', width: '200px'}, 'slow');
        div.animate({fontSize: '3em'}, 'slow')

* color 애니메이션은 안됨
  div.animate({color: 'blue'}, 'slow');
      });
    
*  jQuery 의 모든 '액션'에 관한 메소드는 method chaining이 된다.
    $(selector).action().action().action()...
    $("#btn07").click(function(){
    $("div#d07").css('color', 'red')
      .slideUp(2000)
      .slideDown(2000)
      .animate({left: '100px'})
   ;
       });
  });