js如何实现input里的值抖动效果

需要实现输错提示信息在输入框里闪动几次提示。

评论 (0)链接2012-08-27 

代码如下:
HTML代码(需要下载jquery.validate.min.js):

  
<html>
<head>
<title></title>
<link rel="stylesheet" href="styles.css" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.validate.min.js"></script>
<script type="text/javascript" src="demo.js"></script>
</head>
<body>
<div id="form">
<form id="toValidate" method="post" action="http://www.aldomatic.com">
<strong>First Name:</strong><br />
<input type="text" id="firstname" name="firstname" /><br /><br />
<strong>Last Name:</strong><br />
<input type="text" id="lastname" name="lastname" /><br /><br />
<strong>Email:</strong><br />
<input type="text" id="email" name="email" /><br /><br />
<a herf="#" id="btn" class="css3button">Submit</a>
</form>
</body>
</html>

jQuery代码:

  
$(function(){
// initialize form options
$("#toValidate").validate({
onfocusout: false, // disable blur on fields so animate doesn't replay
onclick: false, // disable click event on fields especially select elements so animation doesn't play again.
rules: {
firstname: "required",
lastname: "required",
email: "required"
},
messages: {
firstname: "Please enter your first name",
lastname: "Please enter your last name",
email: "Enter a correct email."
},
submitHandler: function(form) {
form.submit();
},
highlight: function(element) {
$(element).stop().addClass("inputValidate")
.animate({ left: 0 },32)
.animate({ left: 15 },32)
.animate({ left: 0 },34)
.animate({ left: -15 },32)
.animate({ left: 0 },32);
},
unhighlight: function(element) {
$(element).stop().removeClass("inputValidate");
}
});
// validate form on click
$("#btn").click(function(){
$("#toValidate").validate().form();
return false;
});
});

在线演示链接

另外,之前收藏的另外一个抖动效果一并奉上,供参考:
http://designshack.net/tutorialexamples/buzzinglogin/

该答案已被锁定,无法对其进行评论,编辑及投票。
()
评论 (0)链接 • 2012-08-27
德问是一个专业的编程问答社区,请 登录注册 后再提交答案