WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

jQueryの復習

hide()

表示状態のものを非表示にする
http://efu.sakura.ne.jp/web/jquery/

<!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);
});
</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()

非表示状態のものを表示する
http://efu.sakura.ne.jp/web/jquery/index2.html

<!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);
});
</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()をボタンで切り替え

http://efu.sakura.ne.jp/web/jquery/index3.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>show()メソッドとhide()メソッド</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(){
//表示ボタンをクリックした場合
  $('#show_btn').on('click',function(){
    $('#show1').show();//即座に表示
    $('#show2').show('slow');//スローで表示
    $('#show3').show(3000);//3秒かけて表示
  });
//非表示ボタンをクリックした場合
  $('#hide_btn').on('click',function(){
    $('#show1').hide();//即座に表示
    $('#show2').hide('slow');//スローで表示
    $('#show3').hide(3000);//3秒かけて表示
  });
});
</script>
</head>
<body>
<p><button id="show_btn">表示</button><button id="hide_btn">非表示</button></p>
<div id="show1" class="box">即座に表示</div>
<div id="show2" class="box">スローで表示</div>
<div id="show3" class="box">3秒かけて表示</div>
</body>
</html>

fadeOut(スピード,コールバック関数)

表示状態のものをフェードアウトさせる
()の中を書かないと即座に実行される
http://efu.sakura.ne.jp/web/jquery/index4.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>fadeOut()メソッド</title>
<style>
.box {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);//3秒かけて
});
</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(スピード,コールバック関数)

非表示状態のものをフェードインさせる
http://efu.sakura.ne.jp/web/jquery/index5.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>fadeIn()メソッド</title>
<style>
.box {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);//3秒かけて
});
</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(スピード,コールバック関数)

上から下にスライドして降りて来る
http://efu.sakura.ne.jp/web/jquery/index6.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>slideDown()メソッド</title>
<style>
.box {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);//3秒かけて表示
});
</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(スピード,コールバック関数)

下から上に消えていく
http://efu.sakura.ne.jp/web/jquery/index7.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>slideUp()メソッド</title>
<style>
.box {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);//3秒かけて表示
});
</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:blockの場合はslideDown・display:blockの場合はslideUpの動作を行う

http://efu.sakura.ne.jp/web/jquery/index8.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>slideToggle()メソッド</title>
<style>
.box {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);//3秒かけて表示
});
</script>
</head>
<body>
<div id="slidetoggle1" class="box">即座に</div>
<div id="slidetoggle2" class="box">スローで</div>
<div id="slidetoggle3" class="box">5秒かけて</div>
</body>
</html>

ボタンを押すと交互に行う
http://efu.sakura.ne.jp/web/jquery/index9.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>slideToggle()メソッド</title>
<style>
.box {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(5000);//3秒かけて表示
});
});
</script>
</head>
<body>
<p><button id="toggle_btn">表示・非表示</button></p>
<div id="slidetoggle1" class="box">即座に</div>
<div id="slidetoggle2" class="box">スローで</div>
<div id="slidetoggle3" class="box">5秒かけて</div>
</body>
</html>