アニメーション効果

非表示の状態の要素を表示する

  • show()



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

  • アニメーションのスピードは「slow」「fast」のいずれか、またはミリ秒（1秒=1000ミリ秒）で指定します
  • スピードの指定を省略すると、show()はアニメーションの処理をせずに、非表示の要素を即座に表示します


《例》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>show()</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
  $( 'button' ).click(function(){
    $( 'div' ).show( 'slow' );
  });
});
</script>
<style>
div {
  width: 300px;
  height: 300px;
  background: skyblue;
  display: none;
}
</style>
</head>
<body>
<p><button>表示</button></p>
<div></div>
</body>
</html>
  • 「表示」と書かれたボタンがクリックされると、CSSで display: none に設定されているdiv要素を左上から右下へ少しずつ拡大しながら表示します
show()にコールバック関数を設定する
  • show()は、スピードの後ろにカンマ区切りで「コールバック関数」を設定できます
  • コールバック関数とは、アニメーション処理が完了した後に続けて実行される命令です
  • 「処理が終わったら、この関数を呼び出して」と指定する



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

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>show()</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<style>
div {
  width: 300px;
  height: 300px;
  background: pink;
  display: none;
}
</style>
<script>
$(function(){
  $( 'button' ).click(function(){
    $( 'div' ).show( 'slow', function(){
      $(this).css( 'background', 'skyblue' );
    });
  });
});
</script>
</head>
<body>
<p><button>表示</button></p>
<div></div>
</body>
</html>

表示中の状態の要素を非表示する

  • hide()
  • show()の逆の動きをする命令です
  • HTMLの表示状態 display:block を、display:none に変更します



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

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>hide()</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<style>
div {
  width: 300px;
  height: 300px;
  background: skyblue;
  display: none;
}
</style>
<script>
$(function(){
  $( 'button#show' ).click(function(){
    $( 'div' ).show( 'slow' );
  });
  $( 'button#hide' ).click(function(){
    $( 'div' ).hide( 'slow' );
  });
});
</script>
</head>
<body>
<p><button id="show">表示</button></p>
<p><button id="hide">非表示</button></p>
<div></div>
</body>
</html>


この例の場合、「表示」「非表示」のボタンを何度もクリックするとその回数分待たなければいけません。
この問題を解決するのが、アニメーション処理中の要素を選択できるセレクター「:animated」

  • 「:not()」と組み合わせて「:not(:animated)」と記述すると「アニメーション処理中ではない要素」を絞り込めます
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>hide()</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<style>
div {
  width: 300px;
  height: 300px;
  background: skyblue;
  display: none;
}
</style>
<script>
$(function(){
  $( 'button#show' ).click(function(){
    $( 'div:not(:animated)' ).show( 'slow' );
  });
  $( 'button#hide' ).click(function(){
    $( 'div:not(:animated)' ).hide( 'slow' );
  });
});
</script>
</head>
<body>
<p><button id="show">表示</button></p>
<p><button id="hide">非表示</button></p>
<div></div>
</body>
</html>

要素の表示・非表示を交互に切り換える

  • toggle()



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

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>toggle()</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<style>
div {
  width: 300px;
  height: 300px;
  background: skyblue;
  display: none;
}
</style>
<script>
$(function(){
  $( 'button' ).click(function(){
    $( 'div:not(:animated)' ).toggle( 'slow' );
  });
});
</script>
</head>
<body>
<p><button>表示・非表示</button></p>
<div></div>
</body>
</html>

表示・非表示をスライドで切り換える

  • slideDown() / slideUp()



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



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

開閉パネル
  • dd要素のdisplayプロパティの値が「block」の場合でも、アニメーション処理中の可能性があるため、セレクターに「:not(:animated)」を追加し、アニメーション中ではない場合にのみ slideUp()を実行します
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>toggle()</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<style>
div {
  width: 300px;
  margin: 50px auto;
}
dt{
  background: #7CADB6;
  padding: 10px;
  cursor: pointer;
}
dd{
  border: 1px solid #7CADB6;
  height: 250px;
  margin: 0;
}
</style>
<script>
$(function(){
  $( 'dt' ).click(function(){
    if($( 'dd' ).css( 'display' ) == 'block' ){
      $( 'dd:not(:animated)').slideUp( 'slow' );
    }else{
      $( 'dd' ).slideDown( 'slow' );
    }
  });
});
</script>
</head>
<body>
<dl>
<dt>スライドして表示状態を切り替える</dt>
<dd>
slideDown()とslideUp()、show()やhide()とは違いスライドアニメーションで表示非表示を切り替える命令です。
</dd>
</dl>
</body>
</html>

表示・非表示をスライドで交互に切り換える

  • slideToggle()



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

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>slideToggle()</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<style>
div {
  width: 300px;
  margin: 50px auto;
}
dt{
  background: #7CADB6;
  cursor: pointer;
  padding: 10px;
}
dd{
  border: 1px solid #7CADB6;
  height: 250px;
  margin: 0;
}
</style>
<script>
$(function(){
  $("dt").click(function(){
    $("dd:not(:animated)").slideToggle("slow");
  });
});
</script>
</head>
<body>
<dl>
<dt>スライドして表示状態を切り替える</dt>
<dd>
slideDown()とslideUp()、show()やhide()とは違いスライドアニメーションで表示非表示を切り替える命令です。
</dd>
</dl>
</body>
</html>

表示状態をフェードイン・フェードアウトで切り換える

  • fadeIn() / fedeOut()
  • フェードイン・フェードアウトしながらHTML要素の表示・非表示を切り替える命令
  • 透明度（CSSのopacityプロパティ）の値を徐々に変更することで、フェード効果を実現しています



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



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

<!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>
img {
  display:none;
}
</style>
<script>
$(function(){
  $( 'button#fadeIn' ).click(function(){
    $( 'img:not(:animated)' ).fadeIn( 'slow' );
  });
  $( 'button#fadeOut' ).click(function(){
    $( 'img:not(:animated)' ).fadeOut( 'slow' );
  });
});
</script>
</head>
<body>
<p><button id="fadeIn">表示</button></p>
<p><button id="fadeOut">非表示</button></p>
<p><img src="flower.png" alt="flower"></p>
</body>
</html>

透明度を徐々に変更する

  • fadeTo()
  • 透明度（CSSのopacityプロパティ）の値を徐々に変更することで、フェード効果を実現しています
  • 透明度は、０（非表示）〜１（表示）の数値で指定できます
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>fadeTo()</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
  $( 'button#fade100' ).click(function(){
    $( 'img:not(:animated)').fadeTo( 'slow', 1 );
  });
  $( 'button#fade50' ).click(function(){
    $( 'img:not(:animated)' ).fadeTo( 'slow', 0.5 );
  });
  $( 'button#fade0' ).click(function(){
    $( 'img:not(:animated)' ).fadeTo( 'slow', 0 );
  });
});
</script>
</head>
<body>
<p>
<button id="fade100">表示</button>
<button id="fade50">半透明</button>
<button id="fade0">非表示</button>
</p>
<p><img src="flower.jpg" alt="flower"></p>
</body>
</html>

独自のアニメーションを設定できる

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



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

<!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' ).click(function(){
    $( 'p:not(:animated)' ).animate({
      marginLeft : '-400px' 
    },'slow', 'swing' );
  });
  $( '#building' ).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プロパティの値を徐々に変更する