[JS]実行のタイミング（開始時間・回数・リピートなど）を簡単に設定できるスクリプト -timing
Post on:2012年6月5日
sponsors
JavaScriptにはsetTimeout(), setInterval()とタイミングを設定できるメソッドがありますが、より簡単にタイミング（遅延時間・回数・リピートなど）を設定できるjQueryのプラグインを紹介します。
[ad#ad-2]
デモを例に、スクリプトの使い方を紹介します。
スクリプトの準備
スクリプトを使用するには「jquery.js」と当スクリプトを外部ファイルとして記述します。
※jQueryは1.2+対応で、.join()使用時は1.7+を。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/<preferred-version>/jquery.min.js"></script> <script type="text/javascript" src="http://creativecouple.github.com/jquery-timing/jquery-timing.min.js"></script>
デモ：ベーシック
まずは簡単なデモで、「repeat()」で指定した時間リピートさせます。
$('.example1').repeat(300).toggleClass('blink');
更に、「until()」で回数を指定してリピートさせます。
$('.example2').repeat(100).toggleClass('blink').until(4);
更に、「wait()」で遅延時間を指定します。
$('.example3').wait(500).addClass('blink').wait(200).removeClass('blink');
[ad#ad-2]
repeat(), until(), wait()などを組み合わせることで、更に面白いエフェクトもできます。
デモは上記のベーシックの他に、アドバンスとアルティメットがあります。
デモ：アドバンス
DOM要素を一つずつ順番に取り去ります。
$('.example7').repeat(4000,true).repeat(300).prepend('<li>green').wait(200).append('<li>bottle').until(5).repeat(100).find('li').not('.clazz').first().remove().until();
デモ：アルティメット
不透明度を0から1にリピートし、フェード効果を与えます。
$('.example11').repeat().animate({opacity:0}).animate({opacity:1}).join();
要素ごとに異なるアニメーションを設定します。
var options = { duration:2000, easing:'linear', queue:'myFX' };
$('.example12 .ball').repeat().animate({left:350},options).animate({left:10},options).join('myFX');
$('.example12 .ball').wait().dequeue('myFX'); // why this line?
var options = { duration:900, easing:'linear' };
$('.example12 span').repeat().animate({top:160},options).animate({top:0},options).join();
sponsors
