JS Shake login
by vovkasolovev
HTML
<div class="form">
<span class="first">Вход для избранных</span>
<div class="row">
<label for="LoginForm_username" class="required">Логин <span class="required">*</span></label> <input name="LoginForm[username]" id="LoginForm_username" type="text">
<div class="row">
<label for="LoginForm_password" class="required">Пароль <span class="required">*</span></label> <input name="LoginForm[password]" id="LoginForm_password" type="password">
<div class="row buttons">
<div class="container">
<button id="shaker">Войти</button>
</div>
</div>
CSS
.form {background: #bad996; width: 200px; padding: 20px}
JavaScript
jQuery.fn.shake = function(intShakes, intDistance, intDuration) {
this.each(function() {
$(this).css("position","relative");
for (var x=1; x<=intShakes; x++) {
$(this).animate({left:(intDistance*-1)}, (((intDuration/intShakes)/4)))
.animate({left:intDistance}, ((intDuration/intShakes)/2))
.animate({left:0}, (((intDuration/intShakes)/4)));
}
});
return this;
};
$("#shaker").click(function(){
$(".form").shake(2,10,500);
});