「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({
marginLeft:’数値’
});
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({
                  marginLeft:'120px'
            });
      });

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

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

jQuery

Posted by arkgame

関連投稿: