実践的なメソッド

hide()メソッド

  • 表示されている要素を非表示にする
  • 引数がない場合は、即座に非表示
  • キーワードは、「slow」「normal」「fast」のいずれかを記述
  • 秒数で指定する場合は、「1000」が１秒
<!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()メソッド

  • 非表示されている要素を表示にする
<!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>

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>

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>