今天为大家分享的表单动画 jQuery 插件：Form Animatiom，我想大家看图就知道他作用是干什么了。主要作用就是当用户提交错误表单时，而触发动画提醒功能，这样会更加醒目，而动画效果友好，不会太过唐突。
该插件需要引入 Animate.css 才能实现动画，所以你完全可以从 Animate.css 的几十种动画效果里挑选你喜欢的。
插件名称：Form Animation
下载地址：https://github.com/nnluukhtn/formAnimation
Animate.css 动画演示：https://daneden.github.io/animate.css/
但可能用户会问，这么一个动画也要插件吗？别担心，这个插件只有1KB大小，如果觉得引入 Animate.css 文件太大，可以单独复制他的动画 CSS 样式出来就可以啦。
下图是我引入了 Swing 动画效果，也很适用呢。
使用方法
引入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，动画就变成摇摆效果了，相当简单易用。
相关推荐
- **表单插件（Form Plugins）**: 如jQuery Form Plugin，增强了表单提交和Ajax处理能力。 - **轮播插件（Slider Plugins）**: 如jQuery UI中的Slider，用于创建滑块组件。 - **弹出框插件（Modal Plugins）**: 如...
1. **Custom Animation Banner with jQuery**：这个教程教你如何利用jQuery的Easing插件和2D Transform插件来创建定制的动画横幅。Easing插件允许你实现不同类型的动画过渡效果，而2D Transform则用于在横幅中添加平...
3. **jQuery Form Plugin**：方便处理表单提交，支持异步上传文件，如`$("#form").ajaxSubmit()`。 4. **jQuery Validate**：表单验证插件，可以自定义验证规则，提供错误提示，如`$("#form").validate()`。 5. **...
7. **插件系统（Plugins）**: jQuery拥有庞大的插件生态系统，如jQuery UI提供了丰富的用户界面组件，而jQuery Form Plugin则方便表单提交和处理。 **jQuery 1.7的新特性与改进** 1. **Deferred对象（Deferred ...
9. **表单验证（Form Validation）**：jQuery可以通过`.serialize()`获取表单数据，`.submit()`监听提交事件，结合正则表达式实现客户端验证。 10. **拖放功能（Drag and Drop）**：`.draggable()`和`.droppable()`...
7. **插件（Plugins）**：jQuery生态系统中有大量插件，如jQuery UI提供丰富的用户界面组件，jQPlot用于图表绘制，jQuery Form Plugin处理表单提交等。1.5.1版本时，开发者可以根据需要选择安装和使用这些插件，扩展...
jQuery的强大之处在于丰富的插件生态，如：jQuery UI提供丰富的界面组件，jQuery Form Plugin支持表单提交，以及许多用于数据表格、轮播图等的插件。 总结： jQuery 1.3和1.4版本的API为开发者提供了强大的功能，...
8. **插件（Plugins）**：jQuery拥有庞大的插件生态系统，如jQuery UI用于构建用户界面，jQuery Form Plugin处理表单提交，以及许多其他实用插件。 9. **数据绑定（Data）**：`.data()`方法允许将数据与DOM元素关联...
5. **Form**：对表单元素和数据处理进行了优化，支持异步提交、表单序列化等。 6. **History**：提供了浏览器历史管理，方便在不刷新页面的情况下维护页面状态。 7. **Utils**：包含一系列实用工具函数，如 `$....