LoginSignup
0
0

jQuery エフェクト系メソッド

Posted at

show

非表示になっている要素を表示する.

//基本形
$('selector').show([duration]); 

//例
$('p').show(100); 
  • selector: 表示にしたい要素を指定する.
  • duration: 表示にかかる時間(ミリ秒)を指定する.未入力の場合はすぐ表示する.

hide

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

//基本形
$('selector').hide([duration]); 

//例
$('p').hide(100); 
  • selector: 非表示にしたい要素を指定する.
  • duration: 非表示にかかる時間(ミリ秒)を指定する.未入力の場合はすぐ非表示にする.

animate

アニメーションを設定する.

//基本形
$('selector').animate(styles, [duration], [easing], [complete]);

//例
$('p').animate({width: "200px", height: "200px"}, 1000);
  • selector: アニメーション対象の要素を指定する.
  • styles: アニメーションで変更するCSSのスタイルプロパティを指定する.
  • duration: アニメーションの時間(ミリ秒)を指定する.
  • easing: アニメーションの進行を制御するイージング関数を指定する.
  • complete: アニメーションが完了した後に実行する関数を指定する.

(イージング関数に関してはこの記事の最後に記述)

stop

実行中のアニメーションを停止する.

//基本形
$(selector).stop([clearQueue], [jumpToEnd]);

//例
$('p').stop();
  • selector: アニメーションを中止したい要素を指定する.
  • clearQueue: アニメーションキューをクリアするかどうかを指定する.(デフォルトは false)。
  • jumpToEnd: アニメーションを即座に終了して終了時の状態にジャンプするかどうかを指定する.(デフォルトは false)。

delay

その後に実行されるキューの遅延時間を設定する.

//基本形
$(selector).delay(duration);

//例
$('p').delay(1000);
  • selector: 遅延させたい要素を指定する.
  • duration: 遅延時間(ミリ秒)を指定する.

fadeIn

非表示になっている要素を透明度を上げながら表示する.

//基本形
$(selector).fadeIn([duration], [easing], [complete]);

//例
$('p').fadeIn(1000);
  • selector: フェードインさせたい要素を指定する.
  • duration: フェードインの時間(ミリ秒)を指定する.
  • easing:フェードインの進行を制御するイージング関数を指定する.
  • complete:フェードインが完了した後に実行する関数を指定する.

fadeout

表示になっている要素を透明度を下げながら非表示にする.

//基本形
$(selector).fadeOut([duration], [easing], [complete]);

//例
$('p').fadeOut(1000);
  • selector: フェードアウトさせたい要素を指定する.
  • duration: フェードアウトの時間(ミリ秒)を指定する.
  • easing: フェードアウトの進行を制御するイージング関数を指定する.
  • complete: フェードアウトが完了した後に実行する関数を指定する.

fadeTo

要素の透明度を変更する.

//基本形
$(selector).fadeTo(duration, opacity, [easing], [complete]);

//例
$(selector).fadeTo(1000,0.5);
  • selector: 不透明度を設定したい要素を指定する.
  • duration: 不透明度の変化にかかる時間(ミリ秒)を指定する.
  • opacity: 不透明度を0(完全に透明)から1(完全に不透明)の範囲で指定する.
  • easing: 不透明度の変化の進行を制御するイージング関数を指定する.
  • complete: 不透明度の変化が完了した後に実行する関数を指定する.

slideDown

スライドアニメーション付き(上から下)で,非表示要素を表示にする.

//基本形
$(selector).slideDown([duration], [easing], [complete]);

//例
$('p').slideDown(1000);
  • selector: スライドダウンさせたい要素を指定する.
  • duration: スライドダウンの時間(ミリ秒)を指定する.
  • easing: スライドダウンの進行を制御するイージング関数を指定する.
  • complete: スライドダウンが完了した後に実行する関数を指定する.

slideUp

スライドアニメーション付き(下から上)で,要素を非表示にする.

//基本形
$(selector).slideUp([duration], [easing], [complete]);

//例
$('p').slideUp(1000);
  • selector: スライドアップさせたい要素を指定する.
  • duration: スライドアップの時間(ミリ秒)を指定する.
  • easing: スライドアップの進行を制御するイージング関数を指定する.
  • complete: スライドアップが完了した後に実行する関数を指定する.

toggle

要素の表示・非表示を切り替える.

//基本形
$(selector).toggle([duration], [easing], [complete]);
//例
$('p').toggle(1000);
  • selector: 切り替えを行いたい要素を指定する.
  • duration: 切り替えアニメーションの時間(ミリ秒)を指定する.
  • easing: 切り替えアニメーションの進行を制御するイージング関数を指定する.
  • complete: 切り替えアニメーションが完了した後に実行する関数を指定する.

要素が表示している場合は非表示に,要素が非表示の場合は表示に変更する.

fadeToggle

フェード効果付きで要素の表示・非表示を切り替える.

//基本形
$(selector).fadeToggle([duration], [easing], [complete]);
//例
$('p').fadeToggle(1000);
  • selector: 切り替えを行いたい要素を指定する.
  • duration: 切り替えアニメーションの時間(ミリ秒)を指定する.
  • easing: 切り替えアニメーションの進行を制御するイージング関数を指定する.
  • complete: 切り替えアニメーションが完了した後に実行する関数を指定する.

要素が非表示の場合はフェードイン,表示されている場合はフェードアウトする.

slideToggle

スライドアニメーション付きで要素の表示・非表示を切り替える.

//基本形
$(selector).slideToggle([duration], [easing], [complete]);
//例
$('p').slideToggle(1000);
  • selector: 切り替えを行いたい要素を指定する.
  • duration: 切り替えアニメーションの時間(ミリ秒)を指定する.
  • easing: 切り替えアニメーションの進行を制御するイージング関数を指定する.
  • complete: 切り替えアニメーションが完了した後に実行する関数を指定する.

queue

指定した関数を要素のキューに追加する.

//基本形
$(selector).queue([queueName], newQueue);

//例
$('p').queue(exampleQueue,function(){
	$(this).css('color','red');
	$(this).dequeue();
});
  • selector: キューに関数を追加する要素指定する.
  • queueName: キューの名前を指定する.
  • newQueue: キューに追加する新しい関数を指定する.

dequeue

エンキューされている関数を1つ実行する.実行された関数は削除される.

//基本形
$(selector).dequeue([queueName]);

//例
$('p').dequeue('exampleQueue');
  • selector: キューから関数を実行する要素を指定する.
  • queueName: 実行するキューの名前を指定する.

clearQueue

要素のキューから未実行の関数を削除する.

//基本形
$(selector).clearQueue([queueName]);

//例
$("p").clearQueue();
  • selector: キューから未実行の関数を削除する要素を指定する.
  • queueName: 削除するキューの名前を指定する.

jQuery.fx.off

アニメーションを無効にする.trueを設定するとアニメーションが実行されなくなる.

//基本形
jQuery.fx.off = true;

jQuery.fx.offは現在実行されているアニメを変更することはできない.効果を発揮するのは,jQuery.fx.offを設定した後で実行した後で実行されるアニメのみ.

イージング処理[easing]とは

jQueryで要素にアニメーションをつけた際,単調な動きだけでなく加速・減速など動きに強弱をつけたエフェクトとして,イージング処理をつけることができる.アニメーションをつけるメソッドの引数に指定することでエフェクトに変化をつけられる.

デフォルトで用意されているのは以下の2つである.
liner
→常に一定の速度で動く
swing
→最初と最後だけゆっくりで,途中は早めに動く

また,プラグインを入れることで,他にも様々なeasing処理を利用することができる.

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0