「jQuery」animateメソッドで要素を斜めに移動させるサンプル

2022年8月4日

環境

Google Chrome 104.0.5112.80
Windows 10 Home 64bit
jQuery 3.6.0

構文
.animate( properties [, duration ] [, easing ] [, complete ] )
アニメーションの動きを追加できます。
書式

$("#div要素セレクタID").animate({
　　　　　　　　　　　　marginTop:'数値1',
                  marginLeft:'数値2'
});

animateメソッドで要素を斜めに移動させます。

使用例

<!DOCTYPE html>
<html>
  <body>
   <style>
    #cft{
      height:30px;
      width:30px;
      background-color:skyblue;
      }
    </style>
    
<p><input type="button" id="btnShow" value="表示"></p>
<div id="cft"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>

      $("#btnShow").click(function() {
            $("#cft").animate({
                marginTop:'60px', //要素の上側のマージン領域を設定
                  marginLeft:'80px' //要素の左側のマージン領域を設定
            });
      });

</script>
  </body>
</html>

実行結果
「表示」ボタンを押すとdiv要素cftが斜め下に移動します。

jQuery

Posted by arkgame

関連投稿: