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

ハロトレWebデザインの勉強 | 求職者支援訓練Webサイト制作科 フェリカテクニカルアカデミー

未経験者からプロになるハロートレーニングWebデザインの勉強

animateメソッド

animate()メソッド

  • 現在の座標を基準として、指定した距離まで移動する
<script>
  $( 'セレクタ' ).animate( { 'プロパティ': '値' } );
</script>
  • プロパティは、キャメルケースで記述する
animate()メソッド(1つのCSSプロパティを指定)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>animate()メソッド</title>
<style>
.box {
  width: 200px;
  height: 200px;
  background-color: #9BE074;
}
</style>
<script src="js/jquery-2.2.3.min.js"></script>
<script>
$(document).ready(function() {
  //id="move_box"をマージンレフト800pxまで移動
  $( '#move_box' ).animate({ 'marginLeft': '800px' });
});
</script>
</head>
<body>
<div id="move_box" class="box"></div>
</body>
</html>
animate()メソッド(複数プロパティを同時に指定)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>animate()メソッド</title>
<style>
.box {
  width: 200px;
  height: 200px;
  background-color: #9BE074;
}
</style>
<script src="js/jquery-2.2.3.min.js"></script>
<script>
$(document).ready(function() {
  //id="move_box"をマージンレフト800pxまで移動と縦横減少
  $( '#move_box' ).animate({ 'marginLeft' : '800px', 'width' : '30px', 'height' : '30px' });
});
</script>
</head>
<body>
<div id="move_box" class="box"></div>
</body>
</html>

animate()メソッドを使用したアニメーション

  • アニメーションの時間設定
  • duration:何秒かけてアニメーションする(1000=1秒)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>animate()メソッド</title>
<style>
.box {
  width: 200px;
  height: 200px;
  background-color: #9BE074;
}
</style>
<script src="js/jquery-2.2.3.min.js"></script>
<script>
$(document).ready(function() {
  $( '#move_box' ).animate({ 'marginLeft' : '800px', 'width' : '30px', 'height' : '30px' }, { duration: 5000 });
});
</script>
</head>
<body>
<div id="move_box" class="box"></div>
</body>
</html>
animate()メソッド(アニメーションのイージング指定)
  • イージング:加減速の変化
  • 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="js/jquery-2.2.3.min.js"></script>
<script>
$(function(){
  $( '#move_box_top' ).animate({ 'marginLeft' : '800px' }, { duration: 1500, easing: 'swing' });
  $( '#move_box_bottom' ).animate({ 'marginLeft' : '800px' }, { 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>

jQuery Easing Plugin の使用

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>animate()メソッド</title>
<style>
#move_box {
  width: 200px;
  height: 200px;
  background-color: #E8F836;
}
</style>
<script src="js/jquery-2.2.3.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script>
$(document).ready(function() {
  $( '#move_box' ).animate({ 'marginLeft' : '600px', 'width' : '100px', 'height' : '100px' },
  { duration : 3000, easing : 'easeInQuad', complete: function() { $(this).text('完了'); } }
  );
});
</script>
</head>
<body>
<div id="move_box"></div>
</body>
</html>
途中で停止する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>animate()メソッド</title>
<style>
#move_box {
  width: 200px;
  height: 200px;
  background-color: #E8F836;
}
</style>
<script src="js/jquery-2.2.3.min.js"></script>
<script>
$(document).ready(function() {
  $( '#move_box' ).animate({ 'marginLeft' : '800px' }, { duration: 8000 });
  //STOPボタンイベント[停止後、最後まで移動する]
  $( '#stop_end' ).on( 'click', function() {
    $( '#move_box' ).stop();
  });
  //STOPボタンイベント[クリック後、その場所から最後まで移動する]
  $( '#stop_move' ).on( 'click', function() {
    $( '#move_box' ).animate({ 'marginLeft' : '800px' }, { duration: 8000 });
  });
});
</script>
</head>
<body>
<button id="stop_end">停止 → ストップ</button>
<button id="stop_move">停止 → 最後へ移動</button>
<div id="move_box"></div>
</body>
</html>