HTML & CSS » 表单动画 jQuery 插件：Form Animation Plugin

表单动画 jQuery 插件：Form Animation Plugin

发表于: HTML & CSS. 评论
Sponsor

今天为大家分享的表单动画 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，动画就变成摇摆效果了，相当简单易用。

推荐：查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流：为设计新人提供的设计交流群，请加入UI设计交流群，分享经验、接单、求职、聊设计。
赞助商链接

与 、、 相关的文章

赞助商链接
设计达人微信交流社区：shejidaren888
喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。
«
»

{ 发表评论 }