読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強03月14日開講クラス授業補足ブログ

アニメーション効果

jQuery

animate()メソッド

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

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

1つの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:何秒かけてアニメーションする
  • 1秒が「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プロパティの値を徐々に変更する