今天为大家分享的表单动画 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,动画就变成摇摆效果了,相当简单易用。
相关推荐
jenkins上传scn插件:svn publisher plugin jenkins上传scn插件:svn publisher plugin
jQuery Form Plugin能够让你简洁的将以HTML形式提交的表单升级成采用AJAX技术提交的表单。 插件里面主要的方法, ajaxForm和ajaxSubmit,能够从form组件里采集信息确定如何处理表单的提交过程。 两个方法都支持众多的...
jQuery.h5form - HTML 表单插件 作者:Yoshiyuki Mikome 版权所有 (c) 2012 - 2013 在 MIT (MIT-LICENSE.txt) 和 GPL (GPL-LICENSE.txt) 许可下获得双重许可。 为构建 这个插件为所有浏览器提供了像 Opera 一样的...
jquery-form-validator-plugin :用于字段验证。 使用简单的节点 js 服务器进行设置 下面是关于演示应用程序的草稿。 前端框架草案: Bootstrap CSS Google Fonts DOM / UI JQuery [jquery-1.10.2] Front end ...
图书的源代部分; 还有由于容量的原因, 视频和web实例图片没有上传. 《jQuery全能权威指南:jQuery Core+jQuery Plugin+...、jQuery UI、jQuery Mobile以及大量第三方的插件库和2800多个应用jQuery技术的网页参考。
jQuery grid view plugin - jQuery表格插件
jQuery 表单jQuery Form Plugin,版本:3.50.0-2014.02.05,需要jQuery v1.5或更高版本
jQuery Form Plugin version: 3.51.0
jQuery插件 jquery.pagination.js分页 jquery.dialog.js实施 jquery.tips.js提示框
这是一个封装了摄像功能的jQuery插件。它可以通过一个透明的层直接与JavaScript交互。演示地址:http://www.jq22.com/jquery-info495
NULL 博文链接:https://wine-god.iteye.com/blog/1461056
对齐 jQuery 插件Align 插件建立在函数的基础上,以对齐一个或多个元素在它们的偏移父元素上。用法 .align( options )options :传递给方法的附加选项的映射。 支持的键: 容器:要与之对齐的 DOM 对象。 默认 = 父...
jQuery AutoCalc 插件可自动执行并简化“即时”计算。 最简单的用法是在输入文本标签上设置jsAutoCalc =“”属性,然后调用$("*").jAutoCalc();安装npm i -P jautocalc 包括: 带有源地图的开发版本: dist/...
plugin历史版本1、新的事件.on() .off()3、动画的改进1.42版介绍JQuery插件让Dreamweaver支持提示代码功能引入JQuery展开编辑本段简介 jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript...
formPlugin based on jQuery ...基于jQuery 1.8.x && json2.js 的表单提交插件支持chrome firefox ie8及以上版本插件在utf-8编码环境下构建需要utf-8编码环境的页面才能正常使用[Details] lib: formplugin and depende
jQuery Form Plugin 能够让你简洁的将以HTML形式提交的表单升级成采用AJAX技术提交的表单。 插件里面主要的方法, ajaxForm 和 ajaxSubmit, 能够从form组件里采集信息确定如何处理表单的提交过程。两个方法都支持众多...
一个用于拖放表单创建的jQuery插件,formBuilder具有许多选项并且可以翻译。 例子 jQuery ( $ => { $ ( '#fb-editor' ) . formBuilder ( ) } ) 浏览器支持 最新的 :check_mark: 最新的 :check_mark: 最新的 :...
使用jQuery开发Plugin插件指南
jQuery plugin for autocomplete - jQuery自动完成插件
使用WordPress程序的站长有福了,Google刚刚发布了官方WordPress插件:Google Publisher Plugin(测试版)。该插件可以轻松管理adsense和网管工具,下文分享给大家