[JS]実行のタイミング(開始時間・回数・リピートなど)を簡単に設定できるスクリプト -timing

JavaScriptにはsetTimeout(), setInterval()とタイミングを設定できるメソッドがありますが、より簡単にタイミング(遅延時間・回数・リピートなど)を設定できるjQueryのプラグインを紹介します。

サイトのキャプチャ

timing — a jQuery plugin

デモを例に、スクリプトの使い方を紹介します。

スクリプトの準備

スクリプトを使用するには「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>

デモ:ベーシック

デモのキャプチャ

デモページ:ベーシック 1

まずは簡単なデモで、「repeat()」で指定した時間リピートさせます。

$('.example1')​.repeat(300)​.toggleClass('blink');
デモのキャプチャ

デモページ:ベーシック 2

更に、「until()」で回数を指定してリピートさせます。

$('.example2')​.repeat(100)​.toggleClass('blink')​.until(4);
デモのキャプチャ

デモページ:ベーシック 3

更に、「wait()」で遅延時間を指定します。

$('.example3')​.wait(500)​.addClass('blink')​.wait(200)​.removeClass('blink');

repeat(), until(), wait()などを組み合わせることで、更に面白いエフェクトもできます。
デモは上記のベーシックの他に、アドバンスアルティメットがあります。

デモ:アドバンス

デモのキャプチャ

デモページ:アドバンス 7

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();

デモ:アルティメット

デモのキャプチャ

デモページ:アルティメット 11

不透明度を0から1にリピートし、フェード効果を与えます。

$('.example11')​.repeat()​.animate({opacity:0})​.animate({opacity:1})​.join();
デモのキャプチャ

デモページ:アルティメット 12

要素ごとに異なるアニメーションを設定します。

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();

top of page

©2017 coliss