jQuery表单输入框动画提示效果

表单的交互体验做得好，用户填起内容来才舒服。jQuery 的表单输入框动画提示，就是个蛮实用的小功能，能让表单显得更“聪明”。你一点击输入框，它立刻弹出提示，输入错了还能用动画方式提示错误，响应也挺快。

用起来也不复杂。搭配CSS 的过渡动画，像transition那种，做出淡入淡出的效果顺滑。你甚至可以让提示框根据输入框的位置自动定位，效果直接拉满。

核心逻辑还是靠jQuery 事件：focus、blur、change。比如你写：

$("input").on("focus", function() {
  $('#tooltip').fadeIn().css('top', $(this).offset().top + $(this).outerHeight());
});

是不是一目了然？而且代码结构清晰，改起来也方便。

哦对了，资源包叫texiao5355_1560681025，里面 HTML、CSS、JS 都有，你直接打开看看页面，立马能跑起来。还想看别的动画效果？推荐你几个：

• jquery 输入框键入文字动画特效
• jQuery 加 css3 输入框焦点事件动画特效
• 浮动标签动画特效插件

如果你在做登录页、注册页或者任何需要用户填写内容的表单，不妨加上这套交互，既能提升体验，还能显得更专业。