| 目次 |
|---|
|
・jQueryを使ったエフェクト ・基本的なエフェクト ・スライド効果 ・フェード効果 ・アニメーション効果 |
CSSとタイマーを組み合わせれば、JavascriptでWEBページ/アプリケーションに視覚効果(エフェクト)をつけることができます。
しかし、オリジナルのJavascriptから視覚効果を組み込むのは複雑なコーディングを必要とします。
jQueryは、よく利用される視覚効果をメソッドとして用意しています。
これを用いることで、ブラウザに依らないで簡潔に視覚効果をつけることが可能です。
表示/非表示を切り替えることは、最も基本的な視覚効果です。
リスト1. show([表示速度[,コールバック関数]])
function Sample21(){
jQuery('.Sample21 li:eq(0) span').show();
jQuery('.Sample21 li:eq(1) span').show(5000);
jQuery('.Sample21 li:eq(2) span').show('slow',function(){
jQuery(this).css('background','skyblue');
});
}
実装例
下記の3つは、同じshowメソッドですが、引数が異なります。
リスト2. hide([非表示速度[,コールバック関数]])
function Sample22(){
jQuery('.Sample22 li:eq(0) span').hide();
jQuery('.Sample22 li:eq(1) span').hide(5000);
jQuery('.Sample22 li:eq(2) span').hide('slow',function(){
jQuery(this).show('slow');
});
}
実装例
下記の3つは、同じhideメソッドですが、引数が異なります。
リスト3. toggle([switch/切替速度[,コールバック関数]])
var count23 = 0;
function Sample23(){
jQuery('.Sample23 li:eq(0) span').toggle();
jQuery('.Sample23 li:eq(1) span').toggle((count23 + 1) % 3 != 0);
jQuery('.Sample23 li:eq(2) span').toggle(5000);
jQuery('.Sample23 li:eq(3) span').toggle('slow',function(){
jQuery('.Sample23 b').text(count23);
});
count23++;
}
実装例
下記の4つは、同じtoggleメソッドですが、引数が異なります。
切替回数は0回です。
ブロック要素の高さを変化させることで、スライドして、表示したり、非表示させる視覚効果を与えます。
リスト4. slideDown([表示速度[,コールバック関数]])
function Sample34(){
jQuery('.Sample34 li:eq(0)').slideDown();
jQuery('.Sample34 li:eq(1)').slideDown(5000);
jQuery('.Sample34 li:eq(2)').slideDown('slow',function(){
jQuery(this).css('background','skyblue');
});
}
実装例
下記の3つは、同じslideDownメソッドですが、引数が異なります。
リスト5. slideUp([表示速度[,コールバック関数]])
function Sample35(){
jQuery('.Sample35 li:eq(0)').slideUp();
jQuery('.Sample35 li:eq(1)').slideUp(5000);
jQuery('.Sample35 li:eq(2)').slideUp('slow',function(){
jQuery(this).slideDown('slow');
});
}
実装例
下記の3つは、同じslideUpメソッドですが、引数が異なります。
リスト6. slideToggle([表示速度[,コールバック関数]])
function Sample36(){
jQuery('.Sample36 li:eq(0)').slideToggle();
jQuery('.Sample36 li:eq(1)').slideToggle(5000);
jQuery('.Sample36 li:eq(2)').css('background','');
jQuery('.Sample36 li:eq(2)').slideToggle('slow',function(){
jQuery(this).css('background','skyblue');
});
}
実装例
下記の3つは、同じslideToggleメソッドですが、引数が異なります。
要素の透明度を変化させることで、フェード効果を持った表示/非表示を与えます。
リスト7. fadeIn([表示速度[,コールバック関数]])
function Sample47(){
jQuery('.Sample47 li:eq(0)').fadeIn();
jQuery('.Sample47 li:eq(1)').fadeIn(5000);
jQuery('.Sample47 li:eq(2)').fadeIn('slow',function(){
jQuery(this).css('background','skyblue');
});
}
実装例
下記の3つは、同じfadeInメソッドですが、引数が異なります。
リスト8. fadeOut([表示速度[,コールバック関数]])
function Sample48(){
jQuery('.Sample48 li:eq(0)').fadeOut();
jQuery('.Sample48 li:eq(1)').fadeOut(5000);
jQuery('.Sample48 li:eq(2)').fadeOut('slow',function(){
jQuery(this).fadeIn('slow');
});
}
実装例
下記の3つは、同じfadeOutメソッドですが、引数が異なります。
リスト9. fadeToggle([表示速度[,コールバック関数]])
function Sample49(){
jQuery('.Sample49 li:eq(0)').fadeToggle();
jQuery('.Sample49 li:eq(1)').fadeToggle(5000);
jQuery('.Sample49 li:eq(2)').css('background','');
jQuery('.Sample49 li:eq(2)').fadeToggle('slow',function(){
jQuery(this).css('background','skyblue');
});
}
実装例
下記の3つは、同じfadeToggleメソッドですが、引数が異なります。
スライド効果やフェード効果以外に独自のアニメーション効果を作成することができます。
リスト10. animate
var width510 = '10%';
function Sample510(){
width510 = (width510 == '100%') ? '10%' : '100%';
jQuery('.Sample510 .panel').animate(
{
width : width510,
opacity : 'toggle'
},
{
duration : 10000,
complete : function(){
alert('完了!');
},
step : function(rate){
var cnt = Math.floor( rate * 100 );
jQuery(this).text(cnt + '%');
},
queue : false
}
);
}
実装例
0%
リスト11. stop()
var sw511 = true;
var vc511 = true;
function Sample511(){
if( sw511 ){
jQuery('.Sample511 button').text('リスト11の停止');
sw511 = false;
jQuery('.Sample511 .face').animate(
{
marginLeft : vc511 ? '+=300px' : '-=300px'
},
{
duration : 10000,
complete : function(){
jQuery('.Sample511 button').text('リスト11の実行');
vc511 = vc511 ? false : true;
sw511 = true;
}
}
);
}
else
{
jQuery('.Sample511 .face').stop();
jQuery('.Sample511 button').text('リスト11の実行');
sw511 = true;
}
}
実装例
(^o^)
リスト12. queue()
function Sample512(){
// アニメーションを実行
Queue512();
jQuery('.Sample512 .rest').animate({marginLeft:'+=100px'},'slow',Queue512);
jQuery('.Sample512 .rest').queue(function(){
// アニメーションを追加
jQuery(this).css('color','red');
$(this).dequeue();
Queue512();
});
jQuery('.Sample512 .rest').animate({marginTop:'+=10px'},'slow',Queue512);
jQuery('.Sample512 .rest').queue(function(){
// アニメーションを追加
jQuery(this).css('color','blue');
$(this).dequeue();
Queue512();
});
jQuery('.Sample512 .rest').animate({marginLeft:'-=100px'},'slow',Queue512);
jQuery('.Sample512 .rest').queue(function(){
// アニメーションを追加
jQuery(this).css('color','');
$(this).dequeue();
Queue512();
});
jQuery('.Sample512 .rest').animate({marginTop:'-=10px'},'slow',Queue512);
}
function Queue512(){
// キュー内の数をカウント
var q = jQuery(this).queue();
var n = q.length;
var s = 1;
if( n > 1 ){
s = 9 - n;
}
else
{
// キューをクリア
jQuery(this).queue([]);
}
jQuery(this).text('ステップ ' + s);
}
実装例
ステップ 1