jQuery表单input字段提示信息动画特效

表单和input字段是网页设计不被或缺的一部分。自从“placeholder”属性的出现，越来越少的人会在设计表单时使用Label标签，而是改为使用占位文字。在这个插件中，我们发挥了一点点想象力，将input字段的占位文字产生一些非常酷的动画效果。

插件的工作原理非常简单，插件检测input字段的状态，当发现input字段被聚焦时，插件将用占位文字产生一个新的div，然后使用css3使其向上运动。当input字段失去焦点时，插件就会检查input的内容，如果发现它是空的，那么就将原来占位文字放回去。

HTML结构

我们可以使用html5的自定义字段来使该插件工作。

data-position

这个字段可以让你定义label的位置，

<div class="page-container">
<input type="text" class="label_better" data-position="top" placeholder="Username">
<input type="text" class="label_better" data-position="right" placeholder="Email Address">
                

data-new-placeholder

这个属性可以使你在占位中不仅使用文本还可以使用图标等其它资源。

<input type="text" class="label_better" data-new-placeholder="Type your username" placeholder="Username">
<input type="text" class="label_better" data-new-placeholder="Type your email address" placeholder="Email Address">
                

JAVASCRIPT

首先需要引入jQuery和jquery.label_better.js文件。

<script type="text/javascript" src="http://libs.useso.com/js/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.label_better.js"></script>
                

然后调用插件：

$("input.label_better").label_better({
    position: "top",
    animationTime: 500,
    easing: "ease-in-out",
    offset: 20
  });
                

position：定义label出现的位置。可用参数为：“left”, “right”, “top" 和 “bottom”。“top”为默认参数。

animateTime：label向上或向下动画的时间。默认值为500ms。

easing：类似CSS easing动画方式。用于定义动画的类型。可用参数有：linear, ease, ease-in, ease-out, ease-in-out 和 cubic-bezier。默认值为：ease-in-out。你可以在这里测试easing动画。

offset：该参数用于调整字段和label之间的距离。单位是像素，默认值为：10。