jQueryのアニメーション

jQuery

jQueryのアニメーション効果

HTML要素のサイズや位置、透明度を時間の経過とともに徐々に変化させ、動いているように見せる。

非表示状態の要素を表示する　show()

$( セレクタ ).show( スピード );

スピード：slow, fast または ミリ秒(1000=1秒)

スピードの指定を省略するとアニメーション効果はなく即座に表示する。

 

使用例

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryのアニメーション</title>
<style>
div {
  width: 200px;
  height: 200px;
  background-color: red;
  display: none;
}
</style>
<script src="../js/jquery-2.2.4.min.js"></script>
<script>
$(function(){
  $('button').on('click',function(){
    $('div').show('slow');
  });
});
</script>
</head>
<body>
<button>表示</button>
<div></div>
</body>
</html>

 

アニメーション実行前

f:id:develog:20160924002222p:plain

 

アニメーション実行後

f:id:develog:20160924002300p:plain 

コールバック関数

<title>jQueryのアニメーション</title>
<style>
div {
  width: 200px;
  height: 200px;
  background-color: red;
  display: none;
}
</style>
<script src="../js/jquery-2.2.4.min.js"></script>
<script>
$(function(){
  $('button').on('click',function(){
    $('div').show('slow',function(){//コールバック関数
    //コールバック関数とは処理が終わったら呼び出される関数のこと
      $(this).css('background','blue');
    });
  });
});
</script>
</head>
<body>
<button>表示</button>
<div></div>
</body>

 

アニメーション実行前

f:id:develog:20160924003518p:plain

アニメーション実行後

f:id:develog:20160924003559p:plain

 

表示中の要素を非表示にする　hide() 

$( セレクタ― ).hide( スピード, コールバック関数 );

 

<title>jQueryのアニメーション</title>
<style>
div {
  width: 200px;
  height: 200px;
  background-color: red;
  display: none;
}
</style>
<script src="../js/jquery-2.2.4.min.js"></script>
<script>
$(function(){
  $('button#show').on('click',function(){
    $('div').show('slow');
  });
  $('button#hide').on('click',function(){
    $('div').hide('slow');
  });
});
</script>
</head>
<body>
<button id="show">表示</button>
<button id="hide">非表示</button>
<div></div>
</body>

 

アニメーション実行前

 

f:id:develog:20160924004504p:plain

show()の実行後

f:id:develog:20160924004611p:plain

hide()で赤い四角の要素を消す

f:id:develog:20160924004808p:plain

要素の表示・非表示を交互に切り替える　toggle()

$( セレクタ― ).toggle( スピード, コールバック関数 );

 

<title>jQueryのアニメーション</title>
<style>
div {
  width: 200px;
  height: 200px;
  background-color: red;
  display: none;
}
</style>
<script src="../js/jquery-2.2.4.min.js"></script>
<script>
$(function(){
  $('button').on('click',function(){
    $('div:not(:animated)').toggle('slow');
  });
});
</script>
</head>
<body>
<button id="show">表示・非表示</button>
<div></div>
</body>

 

アニメーション実行前

f:id:develog:20160924005436p:plain

 

toggle()を実行して要素を表示する

f:id:develog:20160924005615p:plain

toggle()を実行して要素を消す

f:id:develog:20160924005626p:plain