アニメーション効果 - web-0127のブログ

animate()メソッド

独自のアニメーションを設定できる
任意のCSSプロパティの値を徐々に変化させて独自のアニメーション効果を作成できる命令
animate()に設定できるCSSプロパティは、height、top、opacityのように数値であらわせるもに限ります
動きには「linear」「swing」を設定できます
linear は、常に一定の速度で、swingは、最初ゆっくり・後半は速い速度で変化をつけながら値を変更します

$( セレクタ ).animate( 値を変更したいCSSプロパティ, スピード, 動き, コールバック関数 );

１つの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>

横にスライドするアニメーション

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>fadeIn() / fadeOut()</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<style>
p {
  width:800px;
  height:267px;
  margin:0;
}
div {
  width:400px;
  height:267px;
  overflow:hidden;
}
</style>
<script>
$(function(){
  $( '#flower' ).on( 'click', function(){
    $( 'p:not(:animated)' ).animate({
      marginLeft : '-400px' 
    },'slow', 'swing' );
  });
  $( '#building' ).on( 'click', function(){
    $( 'p:not(:animated)' ).animate({
      marginLeft : '0' 
    }, 'slow', 'swing');
  });
});
</script>
</head>
<body>
<div>
<p><img src="flower.png" alt="flower" id="flower"><img src="building.png" alt="building" id="building"></p>
</div>
</body>
</html>

命令	意味
show()	要素を徐々に表示する
hide()	要素を徐々に非表示にする
toggle()	要素の表示・非表示を徐々に切り替える
slideDown()	要素をスライドアニメーションで表示する
slideUp()	要素をスライドアニメーションで非表示にする
slideToggle()	要素の表示・非表示をスライドアニメーションで切り替える
fadeIn()	要素をフェードインで表示する
fadeOut()	要素をフェードアウトで非表示にする
fadeTo()	要素の透明度を指定した値に徐々に変更する
animate()	任意のCSSプロパティの値を徐々に変更する