下面是编程之家 jb51.cc 通过网络收集整理的代码片段。编程之家小编现在分享给大家,也给大家做个参考。
今天为大家分享的表单动画 jQuery 插件:Form Animatiom,我想大家看图就知道他作用是干什么了。主要作用就是当用户提交错误表单时,而触发动画提醒功能,这样会更加醒目,而动画效果友好,不会太过唐突。该插件需要引入 Animate.css 才能实现动画,所以你完全可以从 Animate.css 的几十种动画效果里挑选你喜欢的。
效果演示:
但可能用户会问,这么一个动画也要插件吗?别担心,这个插件只有 1KB 大小,如果觉得引入 Animate.css 文件太大,可以单独复制他的动画 CSS 样式出来就可以啦。
使用方法:
引入 animate.css、juqery 库、formAnimation.js 插件到你的 HTML 文档里。
<head>
<link href='animate.css' media='all' rel='stylesheet'>
</head>
...
<body>
<form>
<input required> //表单内容
</form>
<script src="jquery.js"></script>
<script src="jquery.validate.js"></script>
<script src="formAnimation.js"></script>
<script>
// 添加动画效果 shake
$("form").formAnimation({ animatedClass: 'shake' });
</script>
</body>
通过修改「animatedClass: ‘shake’」设置属性来改变动画效果。比如案例中的 shake 改为 swing,动画就变成摇摆效果了,相当简单易用。
以上是编程之家(jb51.cc)为你收集整理的全部代码内容,希望文章能够帮你解决所遇到的程序开发问题。如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。