こちらはjQueryの初心者向けです。

jQueryで要素をAnimateする

jQueryを使いながら、要素を動かしたい時があると思います。
その時は「.animate()」関数を使うと簡単に要素を動かすことができます。

まず、jQueryを導入しましょう。

animate.html

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

それから要素の定義やスタイルを決めましょう。

animate.html

<style type="text/css">
.animate-div {
  width: 100px;
  height: 100px;
  border: #000 2px solid;
}
</style>

<p><button>Animate</button></p>
<div class="animate-div"></div>

するとこんな感じの四角が表示されると思います。

では、animateを定義してみましょう。

animate.html

<script type="text/javascript">
$(document).ready(function() {
  $(document).on("click", "button", function() {
    $(".animate-div").animate({
      width: "300px",
      height: "300px",
      borderColor: "#00f",
      backgroundColor: "#f00"
    });
  });
});
</script>

widthとheightは四角の大きさを変更します。
CSSでは「border-color」のタグがjQueryでは「borderColor」、
「background-color」のタグが「backgroundColor」になることが分かります。

上の「button」が押されたら「.animate-div」の「animate」が実行される感じです。

「Animete」と書いているボタンを押してみましょう。

すると

こんな感じになりましたか？

もし色がだめの時はページの上部に次のコードを導入してみましょう。

animate.html

<script src="http://code.jquery.com/color/jquery.color-2.1.2.min.js" integrity="sha256-H28SdxWrZ387Ldn0qogCzFiUDDxfPiNIyJX7BECQkDE=" crossorigin="anonymous"></script>

jQuery Animate

こちらはjQueryの初心者向けです。

jQueryで要素をAnimateする