くろひょうのwebデザインのお勉強帳

フェリカテクニカルアカデミー web制作科の受講生です。授業の要点、復習でつまづいた点などを記録し、レベルアップに励みます。

クリエイターになるための、お勉強の記録帳

[jQuery]画像の表示・非表示 show()/ hide() / toggle()

show( )

display:noneに指定されている非表示状態の要素を表示します

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

   $ ( function( ) {
      $ ( 'button' ).click( function( ) {
         $ ( '表示する要素' ).show( ’表示速度’ );
      } ) ;

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

※ 表示する要素は、img要素やdiv要素などなんでも良い
※ 表示速度は、'slow' 'fast' またはミリ秒(1000ミリ秒=1秒)ミリ秒の時は’’は不要

例では、img要素の表示です

<script>
$(function(){
   $('button#show').click(function(){
     $('img').show(1500);
   });
});
</script>
<style>
img {
  width: 1200px;
  height:800px;
  display:none;
}
</style>
</head>
<body>
<p><button id="show">表示</button></p>
<p><img src="img/sea.jpg"></p>

f:id:pleasure10501:20150419215554p:plain

hide( )

表示されている要素を非表示にします

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

   $ ( function( ) {
      $ ( 'button' ).click( function( ) {
         $ ( '要素' ).hide( 速度 );
     } ) ;

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー 

$(function(){
  $('button#hide').click(function(){
    $('#photo').hide('slow');
  });
});
</script>
</head>
<body>
<p><button id="hide">非表示</button></p>
<div id="photo">
<img src="/img/l02.png">
</div> 

CSSでdisplay:blockと指定しなくても、ボタンを押すとdisplay:none状態になります。

f:id:pleasure10501:20150420151646p:plain
   ↓ ↓ ↓ 非表示ボタンを押す

f:id:pleasure10501:20150420151648p:plain

:animated

表示・非表示ボタンを素早く繰り返し押すと、クリックした分のアニメーションが完全に終了するまで時間がかかる
    ↓
セレクター : animatedは、:notと組み合わせるとアニメーション処理中の要素ではないものを選択できる

$(' div:not(:animated)')
 ・・・「アニメーション処理中ではないdiv要素」という意味になる
 表示処理中に非表示ボタンをクリックした場合、そのクリックは無効になる

 

$ (function(){
    $('button#show').click(function( ){
  $('div:not(:animated)').show('slow');
  });
    $('button#hide').click( function( ){
        $('div:not(:animated)').hide('slow');
    });
});

toggel( )

画像置換②のtoggleは画像が置き換わるものでしたが、ここでのtoggleは、1つの要素に対して表示・非表示を切り替えられる命令です。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

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

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

$(function(){
   $('button').click(function(){
     $('div').toggle('slow')
   });
});

<p><button>表示・非表示</button></p>
<div>
<img src="/img/l02.png">
</div>

f:id:pleasure10501:20150420160724p:plain

ここでもボタンを連続してクリックすると、その分のアニメーション処理中の時間が長くなります。:not(:animated)を要素に付加することができます。

$(function(){
   $('button').click(function(){
     $('div:not(:animated)').toggle('slow')
   });
});