アニメーション効果

animate()メソッド

  • 独自のアニメーションを設定できる
  • 任意のCSSプロパティの値を徐々に変化させて独自のアニメーション効果を作成できる命令
  • animate()に設定できるCSSプロパティは、height、top、opacityのように数値であらわせるもに限ります
  • 動きには「linear」「swing」を設定できます
  • linear は、常に一定の速度で、swingは、最初ゆっくり・後半は速い速度で変化をつけながら値を変更します
１つのCSSプロパティを指定する
  • プロパティ名は「キャメルケース」で記述する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>animate()メソッド</title>
<style>
.box {width: 300px; height: 300px; background-color: #9BE074;}
</style>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function(){
  //id="move_box"をマージンレフト600pxまで移動
  $("#move_box").animate({
    'marginLeft': '600px'
  });
});
</script>
</head>
<body>
<div id="move_box" class="box"></div>
</body>
</html>
複数CSSプロパティを同時に指定する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>animate()メソッド</title>
<style>
.box {width: 300px; height: 300px; background-color: #9BE074;}
</style>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function(){
  //id="move_box"をマージンレフト600pxまで移動と縦横減少
  $("#move_box").animate({
    "marginLeft" : "600px",
    "width" : "30px",
    "height" : "30px"
  });
});
</script>
</head>
<body>
<div id="move_box" class="box"></div>
</body>
</html>
アニメーションの時間指定
  • アニメーションの秒数指定
  • duration：何秒かけてアニメーションする
  • １秒が「1000」
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>animate()メソッド</title>
<style>
.box {width: 300px; height: 300px; background-color: #9BE074;}
</style>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function(){
  //id="move_box"をマージンレフト600pxまで移動と縦横減少
  $("#move_box").animate(
    {
    //CSSプロパティ指定
    "marginLeft" : "600px",
    "width" : "30px",
    "height" : "30px"
    },  //「}」のあとに「,」（カンマ）を忘れずに入れる
    {
    //何秒かけてアニメーションさせるかを指定する
    duration: 6000
    }
  );
});
</script>
</head>
<body>
<div id="move_box" class="box"></div>
</body>
</html>
アニメーションのイージング
  • linear（リニア）：等速移動
  • swing（スウィング）：急加速した後、徐々に減速して停止
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>animate()メソッド</title>
<style>
.box1, .box2 {height: 50px; width: 50px;}
.box1 {background-color: #F90;}
.box2 {background-color: #93CFE7;}
</style>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function(){
$("#move_box_top").animate(
  {
    "marginLeft" : "1000px"
  },
  {
    duration: 1500,  //最後に「,」（カンマ）を忘れずに入れる
    easing: "swing"  //徐々に加速したのち減速して停止
  }
);

$("#move_box_bottom").animate(
  {
    "marginLeft" : "1000px"
  },
  {
    duration: 1500,  //最後に「,」（カンマ）を忘れずに入れる
    easing: "linear"  //通常移動（加減速の変化なし）
  }
);
});
</script>
</head>
<body>
<div id="move_box_top" class="box1"></div>
<div id="move_box_bottom" class="box2"></div>
</body>
</html>