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

2022年8月4日

環境

Google Chrome 104.0.5112.80

Windows 10 Home 64bit

jQuery 3.6.0

Google Chrome 104.0.5112.80 Windows 10 Home 64bit jQuery 3.6.0

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'

});

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

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

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

使用例

<!DOCTYPE html>

<html>

<body>

<style>

#cft{

height:30px;

width:30px;

background-color:skyblue;

}

</style>

$("#btnShow").click(function() {

$("#cft").animate({

marginTop:'60px', //要素の上側のマージン領域を設定

marginLeft:'80px' //要素の左側のマージン領域を設定

});

</script>

</body>

</html>

<!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>

<!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

関連投稿: