jQueryでanimateを使ってアニメーションを行うには(transformを使う場合)

jQueryでanimateを使ってアニメーションを行うには(transformを使う場合)


jQueryを使って指定のエレメントをアニメーションさせる方法ですが、 transformを使う場合はstepを使う必要があります。

使用方法
$(セレクタ).animate(
{変更したCSS名:値, 変更したCSS名:値, ・・・},
{duration:適用ミリ秒, step:関数}
);



ソースコード
<button id="bt">クリックでanimationする</button>
<script>
  var flag=false;
  $(function(){
    $("#bt").click(function(){
      if(flag){
        $(this).css({ transform: 'rotate(0deg)' });
        $(this).animate(
          {width:"220px" , height:"80px", opacity:0.4},
          {duration:"fast",easing:"swing"}
        );
      }else{
        $(this).animate(
          {width:"320px",height:"200px",opacity:1.0,zIndex:359.9},
          {duration:1000,
            step:function(n){$(this).css({transform:'rotate('+n+'deg)'});}
          }
        );
      }
      flag=!flag;
    });
  });
</script>
			
Mam's WebSite