jQueryでエフェクトを追加しよう！ │ jQuery 入門と実践

jQueryでエフェクトを追加するには、jQuery UIの.effect()を使用します。

アニメーションエフェクトを追加するには、jQuery UIの.effect()を使おう！

jQuery UIの.effect()を使用すれば、アニメーションエフェクトを簡単に追加することができます。

jQuery UIを読み込むには、以下の記事の「jQuery UIはCDNで読み込もう！」を参照してください。

jQuery UIでユーザーインターフェースを追加しよう！

光るエフェクトを追加するサンプル

$('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エフェクトを発生させます。

.on()でイベントを追加しよう！

文字にエフェクトを追加するには、プラグインを使おう！

要素ではなく、文字にエフェクトを追加したい場合は、プラグインを使用します。

jQuery text effect Plugins | jQuery Script

英語のサイトですが、数十種類のプラグインが登録されています。

デモで好みのエフェクトを確認し、プラグインをダウンロード、インストールしてみましょう。

まとめ

アニメーションエフェクトを追加するには、jQuery UIの.effect()を使用します。
光るエフェクトを追加するには、highlightエフェクトを使用します。
画像にエフェクトを追加するには、セレクタで画像を指定します。
スクロールにエフェクトを追加するには、jquery.inviewを使用します。
文字にエフェクトを追加するには、プラグインを使用します。

jQueryでエフェクトを追加しよう！