HTML5で廃止になったblinkの動きを復活させるjQueryのプラグイン「jquery.blink.js」を試してみました。

使い方：blinkさせる要素を指定するクラス名を決め、blinkする間隔をdelayで設定します。サンプルのdelay値は600で、デフォルトは500です。次にblinkの動きを止めるため、前で指定したクラス名に対してunblinkするボタンを設定します。また別なクラス名をblinkさせる要素に追加し、そのクラス名が付いたものだけ停止することも可能です。

対応する要素は多く、サンプルでは、h3、div、p、span、img、td、liの各要素で試しています。また、delay値を変え点滅時間の違うものを混在させることもできますが、とても見辛いので割愛しました。

サンプル

class名「blink」のh3要素 ---（１）

class名「blink class2」のdiv要素 ---（２）

class名「blink class3」p要素 ---（３）

 img要素を含むclass名「blink」のspan要素 ---（４）

class名「blink class4」のtable要素（td要素）---（５）

td要素

td要素

• class名「blink class3」のli要素 ---（６）

 

サンプルのhtmlソース

<h3 class="blink">class名「blink」のh3要素---（１）</h3>
<div class="blink class2">class名「blink class2」のdiv要素---（２）</div>
<p class="blink class3">class名「blink class3」p要素---（３）</p>
<span class="blink"><img src="img3/warning.png">img要素を含むclass名「blink」のspan要素---（４）</span>
<table class="blink class4">
    <tr>
        <td>class名「blink class4」のtable要素（td要素）---（５）</td>
        <td>td要素</td>
        <td>td要素</td>
    </tr>
</table>
<ul>
	<li class="blink class3">class名「blink class3」のli要素---（６）</li>
</ul>
<input type="button" value="div要素（２）を止める" id="stop-2" />
<input type="button" value="p要素（３）とli要素（６）を止める" id="stop-3" />
<input type="button" value="table要素（５）を止める" id="stop-4" />
<input type="button" value="すべてを止める" id="stop" />

blink設定用scriptのソース

$(document).ready(function() {
	$('.blink').blink({
		delay: 600
	});
	$('#stop').click(function() {
		$('.blink').unblink();
	});
	$('#stop-2').click(function() {
		$('.class2').unblink();
	});
	$('#stop-3').click(function() {
		$('.class3').unblink();
	});
	$('#stop-4').click(function() {
		$('.class4').unblink();
	});
});