jQueryでエフェクトを追加するには、jQuery UIの.effect()を使用します。
アニメーションエフェクトを追加するには、jQuery UIの.effect()を使おう!
jQuery UIの.effect()を使用すれば、アニメーションエフェクトを簡単に追加することができます。
jQuery UIを読み込むには、以下の記事の「jQuery UIはCDNで読み込もう!」を参照してください。
光るエフェクトを追加するサンプル
$('div').effect('highlight');
.effect()に’highlight’を渡すことで、要素に光るエフェクトを追加できます。
サンプルではループしていますが、単体では、.effect()の実行後、黄色に光った後、元の要素に戻ります。
$('div').effect('highlight', 1000, function() {
alert('アニメーション完了');
});
第2引数にミリ秒単位のアニメーション時間、第3引数にコールバック関数を追加することもできます。
サンプルでは、1000ミリ秒(1秒)のアニメーション後、alert()でアラートが表示されます。
$('div').effect({
effect: 'highlight',
duration: 1000,
complete: function() {
alert('アニメーション完了');
}
});
オプションをオブジェクトで渡すこともできます。
サンプルの他には、easingでイージングエフェクト、queueでアニメーションをキューするか否かを設定できます。
また、scale, transferエフェクトでは、オプションの設定が必要になります。
画像にエフェクトを追加するには?

<img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=Clip" />
$('img').effect('clip');
セレクタに画像を指定すれば、画像にエフェクトを追加することができます。
画像に限らず、表示領域を持つ要素であれば、エフェクトの追加が可能です。
.effect()で使えるエフェクト種類の一覧
blind
ブラインドを上げるようにスライドアップします。
bounce
ボールが弾むように、縦方向に揺れるエフェクトです。
clip
要素を中心に向けて縦方向に縮小します。
drop
左方向にスライドしてフェードアウトします。
explode
爆発したように、要素が9分割され、外側にフェードアウトします。
fade
要素がフェードアウトするエフェクトです。
fold
スライドアップした後、左方向に折り畳まれるエフェクトです。
highlight
要素が黄色に光り、ハイライトされるエフェクトです。
puff
要素がぷくっと膨れるように、外側にフェードアウトします。
pulsate
要素が表示、非表示を繰り返し、点滅するエフェクトです。
scale
$('div').effect({
effect: 'scale',
percent: 50
});
percentオプションで設定した倍率で拡大、縮小します。
サンプルでは、中心に向けて元のサイズの50%に縮小しています。
shake
左右に揺れるエフェクトです。
size
中心に縮小するエフェクトです。
slide
左方向からスライドするエフェクトです。
スクロールにエフェクトを追加するには?
スクロールにエフェクトを追加するには、画面内に要素が表示されたときにinviewイベントを発生させるjquery.inviewを使用します。
<script src="jquery.inview.min.js"></script>
GitHubからダウンロードし、jQueryの後でjquery.inview.min.jsを読み込みます。
$('div').on('inview', function(event, isInView) {
if(isInView) {
$(this).effect('shake');
}
});
.on()の第1引数に’inview’、第2引数にコールバック関数を渡します。
コールバック関数の第2引数には、画面内に要素が表示されたか否かがtrue, falseで渡されます。
サンプルでは、画面内に要素が表示された場合、shakeエフェクトを発生させます。
文字にエフェクトを追加するには、プラグインを使おう!
要素ではなく、文字にエフェクトを追加したい場合は、プラグインを使用します。
jQuery text effect Plugins | jQuery Script
英語のサイトですが、数十種類のプラグインが登録されています。
デモで好みのエフェクトを確認し、プラグインをダウンロード、インストールしてみましょう。
まとめ
- アニメーションエフェクトを追加するには、jQuery UIの.effect()を使用します。
- 光るエフェクトを追加するには、highlightエフェクトを使用します。
- 画像にエフェクトを追加するには、セレクタで画像を指定します。
- スクロールにエフェクトを追加するには、jquery.inviewを使用します。
- 文字にエフェクトを追加するには、プラグインを使用します。