表单动画 jQuery 插件:Form Animation Plugin
今天为大家分享的表单动画 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,动画就变成摇摆效果了,相当简单易用。
赞助商链接
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。