jquery animate()
CSS 스타일을 이용해 많은 종류의 소스와 속성 값으로 어렵게 애니메이션을 제작해 왔다면 .animate() 메소드는 쉽게 제작할 수 있도록 설계되었습니다.
CSS 의 거의 모든 속성을 이용할 수 있으며 따라서 선택한 요소에 다양한 동작을 적용할 수 있습니다
- 시간당 속도함수(easing function) : liner 일정한속도,  swing 시작,끝에서 느리게 움직임
 

$('선택자').animate({속성:값, 속성:값, ....}, 시간, 시간당속도함수(easimg functon), 콜백함수(function(){}));

 

$("#id1").click( function(){
  $("#id2").animate({left:'250px'});
});

$("#id1").click(function(){
  $("#id2").animate({
    left : '250px',
    opacity:'0.5',
    width:'150px,
    height:'150px',
  });
});

** 상대값을 사용한 animation 
- 상태 값에 +=, -=을 붙여서 적용

$("#id1").click(function(){
  $("#id2").animate({
    left : '250px',
    opacity:'0.5',
    width:'+=150px,  //현재 width 값에 +150px
    height:'-=150px',  //현재 height 값에 +150px
  });
});

** Pre-defined 값을 이용한 animation
숫자값을 가진 속성은 show, hide, toggle 이라는 문자열을 속성값으로 입력 할 수 있습니다.
아래와 같이 height:'toggle'로 입력 할 경우 해당 요소가 보이기/숨기기를 toggle 한다.
height:'hide' 는 height:'0px' 과 동일한 동작을 한다.

$("#id1").click(function(){
  $("#id2").animate({
    width:'toggle',
    height:'toggle', //height:'show' height:'hide',
  }, 1000);
});

** 큐 기능을 이용한 animation
여러 애니메이셔니 서로 호출 하게 하는 경우 사용
애니메이션 순차적으로 실행딘다.

$("#id1").click(function(){
  var div = $("div")
  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:'300px', opacity:'0.4'},"slow");
});

** 텍스트를 가진 animation
폰트가 커지는 애니메이션

$("div").click(function(){
  var div = $("div");
  div.animate({left:'100px'}, "slow");
  div.animate({fontSize:'3em'}, "slow");
});

 

$(functon(){
  $('.btn_st').click( function(){
    $('.bar').animate({
      width:'100%',
      opacity:1
    }, 2000 ,liner, function(){
       console.log('bar_st');
    });  
  });

  $('.bar_ed').click( function(){
    $('.bar'),animation({
       widrh:'1px',
       opacity:0 
    }, 2000, swing, function(){
      console.log('bar_en');
    });
  });

});