酒と泪とRubyとRailsと

Ruby on Rails と Objective-C は酒の肴です!

Quovolver 特定の要素を一定時間ごとにアニメーションで切り替えるjQueryプラグイン

例えば検索キーワードを一定時間(秒)ごとにアニメーションで切り替えることで、検索ワードの候補を提示するときなどに便利なjQuery Plugin『Quovolve』の紹介です。


Quovolverのデモ

jQueyr プラグイン Quovolverってどんなの?ということ下はDemoページのリンクです。

jQueyr プラグイン Quovolver

Webページ内の特定のHTML要素が変化していくので、目立たせたい場所には持って来いですね!

サンプルソース

導入もシンプルです。まずはこちらからファイルをダウンロード。

sebnitu/Quovolver · GitHub

HTMLにjavascriptを宣言。

1
2
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="jquery.quovolver.js"></script>

同じくHTML側に変化させる要素を設置。

1
2
3
4
5
<ul class="quotes">
    <li>hoge</li>
    <li>fuga</li>
    <li>moge</li>
</div><!-- .quotes -->

あとはjavascript側に下の要素を設置でコーディングは完了。

1
2
3
$(document).ready(function() {
  $('ul.quotes').quovolver();
});

アニメーションのON/OFFや、切り替え時間(秒)の変更などもオプションで変更できます。
詳しくは下の公式サイトを御覧ください。

Quovolver

Special Thanks

「○○氏の声」を次々と表示できるjQueryプラグイン「Quovolver」:phpspot開発日誌

おすすめの書籍