animateの物体移動場所指定際にcssのposition指定に注意

javascript
jQuery
javascript
css

JavaScriptのanimate関数を利用して、ｃｓｓのposition属性を利用して表示物体の移動先を指定する際に、「aboslute」指定し忘れると、物体の移動がうまくいかないことがある。その場合「margin」属性の設定で物体を移動させることが可能となる。

cssのleftとrightで物体移動先設定する場合にposition属性に「aboslute」を設定し忘れると物体がうまく移動しない

  • 前提条件：
    • JavaScriptのanimate関数を利用して表示物体を移動する
    • animateでの移動先指定はcssのleft、rightで指定する
    • 移動物体position設定し忘れ、または「aboslute」として設定していない
  • 物体移動させる正常動作(position:absolute設定あり)のhtmlのプログラムは以下のよう 
    <html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    div {
      position: absolute;
      margin: 3px;
      width: 40px;
      height: 40px;
      left: 0px;
      top: 60px;
      background: green;
      display: none;
    }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
  <div></div>
  <script>
    $( "div" )
      .show( "slow" )
      .animate({ left: "+=200" }, 2000 )
  </script>
</body>
</html
  • 物体移動させない(position:absolute設定なし)のhtmlのプログラムは以下のよう 
    <html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    div {
      // position: absolute;   ⇐ この記述の削除
      margin: 3px;
      width: 40px;
      height: 40px;
      left: 0px;
      top: 60px;
      background: green;
      display: none;
    }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
  <div></div>
  <script>
    $( "div" )
      .show( "slow" )
      .animate({ left: "+=200" }, 2000 )
  </script>
</body>
</html>

物体移動先設定する場合にposition属性に「aboslute」を設定しなくても「margin-left」で動作させる方法がある

  • 上記例では、移動物体の場所をleftで指定したので、そのpositionが「aboslute」で設定しないとうまく物体の移動ができない。
  • ここで「position」属性と関係ない「margin-left」を使用すると、表示物体をうまく移動させた 
    <html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    div {
      //position: absolute;
      margin: 3px;
      width: 40px;
      height: 40px;
      left: 0px;
      top: 60px;
      background: green;
      display: none;
    }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
  <div></div>
  <script>
    $( "div" )
      .show( "slow" )
      .animate({ 'margin-left': "+=200" }, 2000 )
  </script>
</body>
</htm>

移動物体の表示範囲及び関連属性の理解は重要

  • 以下のイメージでｃｓｓで物体の表示範囲、界面などを示している
  • 属性：right、left、top、bottomが表示物体の界面にあるので、当然「position」の属性に関わる
  • 属性marginが表示物体の界面外なので、「position」属性がなくても表示物体の移動させることができる
  •