[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>
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状態になります。
↓ ↓ ↓ 非表示ボタンを押す
: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>
ここでもボタンを連続してクリックすると、その分のアニメーション処理中の時間が長くなります。:not(:animated)を要素に付加することができます。
$(function(){
$('button').click(function(){
$('div:not(:animated)').toggle('slow')
});
});