jQueryで対象の要素をプルプル振動
指定の要素が小刻みに震え続ける
構造はスライドショーで画像切り替えと同じ。スライドさせるか、振動させるかの違い。
jQuery
$(function () {
// 50ミリ秒（0.05秒）で切り替え
var timer = setInterval(vibration, 50);
// 初期位置
var default_top = $('#icon').css('padding-top');
var default_left = $('#icon').css('padding-left');
function vibration()
{
// 1~10
var random_top = Math.ceil( Math.random()*10 );
var random_left = Math.ceil( Math.random()*10 );
// 振動発生（positionのtopとleftでも代用可能）
$('#icon').css({
'padding-top': random_top,
'padding-left': random_left
});
}
$('#icon').hover(
function () {
// 振動を中止
clearInterval(timer);
// 初期設定(戻す必要がある場合）
$('#icon').css({
'padding-top': default_top,
'padding-left': default_left
});
}, function () {
// 振動を再開
timer = setInterval(vibration, 50);
}
);
});
サンプル
見続けると目が痛くなるので要注意！
