[JS]フォームのエラー箇所をアニメーションでブルッとさせるスクリプト
Post on:2009年9月17日
sponsors
フォームのエラー箇所にブルッとしたアニメーションのエフェクトを加えるスクリプトをJanko At Warp Speedから紹介します。
Animate validation feedback using jQuery
demo
デモではフィールドが空の場合にエラーとして、ブルッとしたアニメーションのエフェクトを加えます。
スクリプトのベースにはjQueryが使用されており、下記のスクリプトを記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<textarea name="code" class="js" cols="60" rows="5"> $("#signup").click(function() { var emptyfields = $("input[value=]"); if (emptyfields.size() > 0) { emptyfields.each(function() { $(this).stop() .animate({ left: "-10px" }, 100).animate({ left: "10px" }, 100) .animate({ left: "-10px" }, 100).animate({ left: "10px" }, 100) .animate({ left: "0px" }, 100) .addClass("required"); }); } }); </textarea> |
移動の量やタイミングの調整は数値を変更します。
- 注意
- アニメーションだけでエラーを明示するものではなく、あくまでも補助的にユーザーの注意をひきつけるために使用します。
sponsors
