jQueryUIでMacのログオン失敗時っぽい挙動を再現する。

パスワードが違うとぶるぶる左右にゆれるあれ。

1, まずはjQueryUIを読み込む。下記はgoogleのホスティングサービスを利用した例。まぁどこで読み込んでもいいけどhead内が無難かと。

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

2, そしたら使いまわしやすいようにぶるぶる専用の関数を作ってみる

function shake(elem){
	var shakeTimes = 3;		
	$(elem).effect('shake', {times:(shakeTimes)}, 300);
}

※shakeTimesは何回左右にゆれるかを指定
※3行目、最後の因数に総処理時間をミリ秒で指定

3, 作った関数へぶるぶるさせたいエレメントを渡してあげれば完了

target = $('div.error');
shake(target);

上記はclass=”error”のdiv要素をぶるぶるさせる時の例。

jQueryUIめっちゃたのしい。