JavaScript

指定した要素をパカパカと点滅させることができる「jquery.flicker」

とてもシンプルなプラグインだったのでメモがてらご紹介します。指定した要素をパカパカと点滅させることができる「jquery.flicker」です。何か間違った操作をした時に警告っぽい感じを出したい場合にいいかもしれないですね。普通のファイルで946 Bytes、minの方で771 Bytesということでめっちゃ軽量です。という訳で以下使い方です。

[ads_center]

使い方

jQuery本体とダウンロードしたjquery.flicker.js(またはjquery.flicker.min.js)を読み込みます。

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script>
<script type="text/javascript" src="jquery.flicker.js"></script>
<script type="text/javascript">
$(function(){
    $('#sample').click(function(){
        $('body').flicker({
            'reps': 5, 
            'pause': 200, 
            'delay': 800, 
            'color': '#e55'
        });
    });
});
</script>

上記はid名がsampleという要素をクリックするとbodyが点滅するようになります。

オプション

オプションは点滅の回数や色、間隔などを設定できます。

reps

点滅する回数です。

pause

点滅して色がついている時の時間の長さです。

delay

点滅する間隔です。

color

色を設定できます。

こんな感じで使い方やオプションもシンプルで使いやすいですね。ちょっとした注意を促す時なんかに使ってみたいプラグインかと思います。

以下からダウンロードできます。

関連記事

  1. Clock Timepicker Plugin for jQuery
  2. pixelate.js
  3. Art Text Light jQuery plugin

    JavaScript

    テキストに光が移動するエフェクトを与えることができる「Art Text Light jQuery p…

    指定したテキストに光が移動するエフェクトを与えることができるjQuer…

  4. JavaScript

    jQuery MobileでWebサイトをスマートフォン対応にする時に見ておきたい記事のまとめ

    今更ながらようやくjQuery Mobileを使い始めたんですが、基本…

  5. jQuery Tooltip Basic

    JavaScript

    カスタマイズしやすいツールチップ実装「jQuery Tooltip Basic」

    jQuery Tooltip Basicは、カスタマイズしやすいツール…

  6. no-image

    JavaScript

    高さを揃えたレスポンシブな画像ギャラリー「jQuery Mosaic plugin」

    jQuery Mosaic pluginは高さを揃えたレスポンシブな画…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. cheero Smart USB Charger 48W CHE-320
  2. ブエノカフェ CM-200

アーカイブ

PAGE TOP