jQueryでanimateを使ってアニメーションを行うには

jQueryでanimateを使ってアニメーションを行うには


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

使用方法
$(セレクタ).animate(
{変更したCSS名:値, 変更したCSS名:値, ・・・},
{duration:適用ミリ秒, easing:"linear" 又は "swing"}
);



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