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

ハロトレWebデザインの勉強 | 求職者支援訓練Webサイト制作科 フェリカテクニカルアカデミー

未経験者からプロになるハロートレーニングWebデザインの勉強

表示・非表示、フェードアウト・フェードイン、スライドアップ・スライドダウン

要素を隠す

  • hide( )メソッド
  • display: none; にするメソッド
  • 非表示にするスピードは、ミリ秒で指定する(slowは600ミリ秒、fastは200ミリ秒)
  • 秒数で指定する場合は、「1000」が1秒
  • 引数がない場合は、即座に非表示
<!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="js/jquery-2.2.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( )メソッド
  • CSSで display: none; に設定されていることが前提
  • display: block; にするメソッド(要素がインラインの場合、display: inline; )
  • 非表示にするスピードは、ミリ秒で指定する(slowは600ミリ秒、fastは200ミリ秒、デフォルト400ミリ秒)
<!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="js/jquery-2.2.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="js/jquery-2.2.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">3秒かけて</div>
</body>
</html>

フェードアウトで非表示にする

  • fadeOut( )メソッド
  • フェードアウト(透明になりながら消える)のアニメーションをしながら非表示にします
  • hide( )メソッドと同様、最終的には display: none; にするメソッド
<!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="js/jquery-2.2.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( )メソッド
  • display: block; にするメソッド(要素がインラインの場合、display: inline; )
  • フェードイン(透明度0%から100%)のアニメーションをしながら表示にします
  • フェード系のエフェクトは、不透明度(opacity)が変更されて変化しています
<!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="js/jquery-2.2.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>

縦にスライドしながら要素をたたむ

  • slideUp( )メソッド
  • heightを操作
  • 要素を上にスライドさせながら、最後には非表示にするメソッド
  • 開いているものを閉じる
<!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="js/jquery-2.2.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>

縦にスライドしながら要素を開く

  • slideDown( )メソッド
  • heightを操作
  • 要素を下にスライドさせながら、最後には表示にするメソッド
  • 閉じているものを開く
<!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="js/jquery-2.2.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>

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="js/jquery-2.2.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="js/jquery-2.2.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="js/jquery-2.2.3.min.js"></script>
<script src="js/jquery-migrate-1.3.0.min.js"></script>
</head>
<body>
<div id="container">
<p><img src="img/surf01.png" id="imgChange"></p>
</div>
<script>
$(function(){
  $('#imgChange').toggle(function(){
    $( this ).attr('src','img/surf02.png');
  },function(){
    $( this ).attr('src','img/surf03.png');
  },function(){
    $( this ).attr('src','img/surf04.png');
  });
});
</script>
</body>
</html>