実践的なメソッド

hide()メソッド

  • 表示されている要素を非表示にする
  • HTMLの表示状態 display:block を、display:none に変更します
  • 引数がない場合は、即座に非表示
  • キーワードは、「slow」「normal」「fast」のいずれかを記述
  • 秒数で指定する場合は、「1000」が１秒

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

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>hide()メソッド</title>
<style>
.box {width: 300px; height: 300px;}
#hide1 {background-color: #FDF9A1;}
#hide2 {background-color: #E1C9F9;}
#hide3 {background-color: #9BE074;}
</style>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function(){
  $('#hide1').hide();  //即座に非表示
  $('#hide2').hide('slow');  //スローで非表示
  $('#hide3').hide(10000);  //10秒かけて非表示
});
</script>
</head>
<body>
<div id="hide1" class="box">即座に非表示</div>
<div id="hide2" class="box">スローで非表示</div>
<div id="hide3" class="box">10秒かけて非表示</div>
</body>
</html>

show()メソッド

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

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

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>show()メソッド</title>
<style>
.box {width: 300px; height: 300px; display: none;}
#show1 {background-color: #FDF9A1;}
#show2 {background-color: #E1C9F9;}
#show3 {background-color: #9BE074;}
</style>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function(){
  $('#show1').show();  //即座に表示
  $('#show2').show('slow');  //スローで表示
  $('#show3').show(5000);  //5秒かけて表示
});
</script>
</head>
<body>
<div id="show1" class="box">即座に表示</div>
<div id="show2" class="box">スローで表示</div>
<div id="show3" class="box">5秒かけて表示</div>
</body>
</html>

show()メソッドとhide()メソッド

  • 「表示・非表示」clickイベントで実装
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>show()メソッドとhide()メソッド</title>
<style>
.box {float: left; width: 300px; height: 300px; display: none;}
#hide1 {background-color: #FDF9A1;}
#hide2 {background-color: #E1C9F9;}
#hide3 {background-color: #9BE074;}
</style>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function(){
  //表示ボタンをクリックした場合
  $('#show_btn').on('click',function(){
    $('#hide1').show();  //即座に表示
    $('#hide2').show('slow');  //スローで表示
    $('#hide3').show(3000);  //3秒かけて表示
  });
  //非表示ボタンをクリックした場合
  $('#hide_btn').on('click',function(){
    $('#hide1').hide();  //即座に非表示
    $('#hide2').hide('slow');  //スローで非表示
    $('#hide3').hide(3000);  //3秒かけて非表示
  });
});
</script>
</head>
<body>
<p><button id="show_btn">表示</button>　<button id="hide_btn">非表示</button></p>
<div id="hide1" class="box">即座に</div>
<div id="hide2" class="box">スローで</div>
<div id="hide3" class="box">３秒かけて</div>
</body>
</html>
show()にコールバック関数を設定する
  • show()は、スピードの後ろにカンマ区切りで「コールバック関数」を設定できます
  • コールバック関数とは、アニメーション処理が完了した後に続けて実行される命令です
  • 「処理が終わったら、この関数を呼び出して」と指定する
  • 「表示」「非表示」のボタンを何度もクリックするとその回数分待たなければいけません。
  • この問題を解決するのが、アニメーション処理中の要素を選択できるセレクター「: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.3.min.js"></script>
<style>
div {
  width: 300px;
  height: 300px;
  background: skyblue;
  display: none;
}
</style>
<script>
$(function(){
  $( 'button#show' ).on( 'click', function(){
    $( 'div:not(:animated)' ).show( 'slow' );
  });
  $( 'button#hide' ).on( '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>

fadeOut()メソッド

  • 表示されている要素をフェードアウトする
  • フェードアウト（透明になりながら消える）のアニメーションをしながら非表示にします
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>fadeOut()メソッド</title>
<style>
.box {float: left; width: 300px; height: 300px;}
#fadeout1 {background-color: #FDF9A1;}
#fadeout2 {background-color: #E1C9F9;}
#fadeout3 {background-color: #9BE074;}
</style>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function(){
  $('#fadeout1').fadeOut();  //即座に非表示
  $('#fadeout2').fadeOut('slow');  //スローで非表示
  $('#fadeout3').fadeOut(5000);  //5秒かけて非表示
});
</script>
</head>
<body>
<div id="fadeout1" class="box">即座に</div>
<div id="fadeout2" class="box">スローで</div>
<div id="fadeout3" class="box">5秒かけて</div>
</body>
</html>

fadeIn()メソッド

  • 非表示されている要素をフェードインする
  • フェードイン（透明度０％から100％）のアニメーションをしながら表示にします
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>fadeIn()メソッド</title>
<style>
.box {float: left; width: 300px; height: 300px; display: none;}
#fadein1 {background-color: #FDF9A1;}
#fadein2 {background-color: #E1C9F9;}
#fadein3 {background-color: #9BE074;}
</style>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function(){
  $('#fadein1').fadeIn();  //即座に非表示
  $('#fadein2').fadeIn('slow');  //スローで非表示
  $('#fadein3').fadeIn(5000);  //5秒かけて非表示
});
</script>
</head>
<body>
<div id="fadein1" class="box">即座に</div>
<div id="fadein2" class="box">スローで</div>
<div id="fadein3" class="box">5秒かけて</div>
</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.3.min.js"></script>
<style>
img {
  display:none;
}
</style>
<script>
$(function(){
  $( 'button#fadeIn' ).on( 'click', function(){
    $( 'img:not(:animated)' ).fadeIn( 'slow' );
  });
  $( 'button#fadeOut' ).on( '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.3.min.js"></script>
<script>
$(function(){
  $( 'button#fade100' ).on( 'click', function(){
    $( 'img:not(:animated)').fadeTo( 'slow', 1 );
  });
  $( 'button#fade50' ).on( 'click', function(){
    $( 'img:not(:animated)' ).fadeTo( 'slow', 0.5 );
  });
  $( 'button#fade0' ).on( '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>

slideDown()メソッド

  • 非表示されている要素をスライドダウンで表示する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>slideDown()メソッド</title>
<style>
.box {float: left; width: 300px; height: 300px; display: none;}
#slidedown1 {background-color: #FDF9A1;}
#slidedown2 {background-color: #E1C9F9;}
#slidedown3 {background-color: #9BE074;}
</style>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function(){
  $('#slidedown1').slideDown();  //即座に表示
  $('#slidedown2').slideDown('slow');  //スローで表示
  $('#slidedown3').slideDown(5000);  //5秒かけて表示
});
</script>
</head>
<body>
<div id="slidedown1" class="box">即座に</div>
<div id="slidedown2" class="box">スローで</div>
<div id="slidedown3" class="box">5秒かけて</div>
</body>
</html>

slideUp()メソッド

  • 表示されている要素をスライドアップで非表示にする
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>slideUp()メソッド</title>
<style>
.box {float: left; width: 300px; height: 300px;}
#slideup1 {background-color: #FDF9A1;}
#slideup2 {background-color: #E1C9F9;}
#slideup3 {background-color: #9BE074;}
</style>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function(){
  $('#slideup1').slideUp();  //即座に非表示
  $('#slideup2').slideUp('slow');  //スローで非表示
  $('#slideup3').slideUp(5000);  //5秒かけて非表示
});
</script>
</head>
<body>
<div id="slideup1" class="box">即座に</div>
<div id="slideup2" class="box">スローで</div>
<div id="slideup3" class="box">5秒かけて</div>
</body>
</html>

slideToggle()メソッド

  • 要素の表示・非表示を切り替える
  • 「display: none」のある・なしで表示・非表示を切り替える
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>slideToggle()メソッド</title>
<style>
.box {float: left; width: 300px; height: 300px; display: none;}
#slidetoggle1 {background-color: #FDF9A1;}
#slidetoggle2 {background-color: #E1C9F9;}
#slidetoggle3 {background-color: #9BE074;}
</style>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function(){
  $("#slidetoggle1").slideToggle();  //即座に表示
  $("#slidetoggle2").slideToggle('slow');  //スローで表示
  $("#slidetoggle3").slideToggle(5000);  //5秒かけて表示
});
</script>
</head>
<body>
<div id="slidetoggle1" class="box">即座に</div>
<div id="slidetoggle2" class="box">スローで</div>
<div id="slidetoggle3" class="box">5秒かけて</div>
</body>
</html>

ボタンで切り替えるslideToggle()メソッド

  • 表示・非表示をボタンで切り替える
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>slideToggle()メソッド</title>
<style>
.box {float: left; width: 300px; height: 300px; display: none;}
#slidetoggle1 {background-color: #FDF9A1;}
#slidetoggle2 {background-color: #E1C9F9;}
#slidetoggle3 {background-color: #9BE074;}
</style>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function(){
  $("#toggle_btn").on("click",function(){
    $("#slidetoggle1").slideToggle();  //即座に表示・非表示
    $("#slidetoggle2").slideToggle('slow');  //スローで表示・非表示
    $("#slidetoggle3").slideToggle(2000);  //2秒かけて表示・非表示
  });
});
</script>
</head>
<body>
<p><button id="toggle_btn">表示 or 非表示</button></p>
<div id="slidetoggle1" class="box">即座に</div>
<div id="slidetoggle2" class="box">スローで</div>
<div id="slidetoggle3" class="box">2秒かけて</div>
</body>
</html>
toggle
  • 同じ命令を繰り返し処理する
  • 1.9からは削除されたメソッド
  • jQuery Migrate 1.2.1 で復元することができます
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>クリックする度に画像が換わる</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
</head>
<body>
<div id="container">
<p id="imgChange"><img src="img/surf01.png"></p>
</div>
<script>
$(function(){
  $('#imgChange').toggle(function(){
    $('img').attr('src','img/surf02.png');
  },function(){
    $('img').attr('src','img/surf03.png');
  },function(){
    $('img').attr('src','img/surf04.png');
  });
});
</script>
</body>
</html>