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

サンプル

見続けると目が痛くなるので要注意!

最新の記事

プロフィール

流されるままにウェブ業界で仕事しています。
主にLAPP環境でPHPを書いています。
最近はjQueryをよく書いています。