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

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

jQuery基礎 - まとめ(アニメーション)

fadeIn / fadeOut

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQuery sample</title>
<link rel="stylesheet" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div id="box1" class="box">fadeIn</div>
<div id="box2" class="box">fadeOut</div>
<script>
$(function(){
  $('#box1').fadeIn( 1000 );
  $('#box2').fadeOut( 1000 );
});
</script>
</body>
</html>
.box{
  width: 200px;
  height: 200px;
	font-size:2em;
  color: #FFF;
  text-align: center;
  line-height: 200px;
}
#box1 {
	background: #4DB7B2;
	display:none;
}
#box2 {
	background: #E29F1B;
	display:block;
}
コールバック関数
  • アニメーション終了時にJavaScriptを実行させる
  $('#box1').fadeIn( 1000, function(){
    alert( 'フェードイン完了' );
  } );

slideDown / slideUp

  • 上下の直線的な動き
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQuery sample</title>
<link rel="stylesheet" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div id="box1" class="box">slideDown</div>
<div id="box2" class="box">slideUp</div>
<script>
$(function(){
  $('#box1').slideDown( 1000 );
  $('#box2').slideUp( 1000 );
});
</script>
</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>

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

  • 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プロパティ)の値を徐々に変更することで、フェード効果を実現しています
  • 透明度は、0(非表示)〜1(表示)の数値で指定できます
<!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>