jQueryのanimateで要素をCSSアニメーション

jQueryを使って指定のエレメントをアニメーションさせる方法です。

使用方法

$(セレクタ).animate(

  {変更したCSS名:値, 変更したCSS名:値, ・・・},

  {duration:適用ミリ秒, easing:"linear" 又は "swing"}

);

クリックでanimationする

ソースコード

<button id="bt">クリックでanimationする</button>
<script>
  var flag=false;
  $(function(){
    $("#bt").click(function(){
      if(flag){
        $(this).animate(
          {width:"220px", opacity:1.0, height:"40px"},
          {duration:"fast",easing:"linear"}
        );
      }else{
        $(this).animate(
          {width:"320px", opacity:0.4, height:"200px"},
          {duration:1000,easing:"swing"}
        );
      }
      flag=!flag;
    });
  });
</script>