简单实用的jQuery表单输入框浮动标签动画特效插件

phAnimate是一款简单实用的jquery表单输入框浮动标签动画特效插件。通过该插件，你可以非常轻松的为表单input元素添加浮动标签动画效果。

 

在线预览  下载

 

 使用方法

在页面中引入jquery和phanimate.jquery.js文件。

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/phanimate.jquery.js"></script>                  

 HTML结构

为<input>元素设置一个<label>元素作为它的标签。并使用一个<div>元素将它们包裹起来。

<div class="custom-input"><label for="test">Test 1</label><input type="text" class="form-control" id="test">
</div>

 CSS样式

为包裹的div元素设置定位方式为相对定位，一个一些内边距和外边距。

.custom-input {position: relative;padding-top: 20px;margin-bottom: 10px;
}                 

标签label元素实用绝对定位，top和left属性的值分别设置为15像素和27像素。并为所有的动画属性执行0.3秒的ease效果过渡动画。

.custom-input input {padding-left: 15px;
}.custom-input label {cursor: text;margin: 0;padding: 0;left: 15px;top: 27px;position: absolute;font-size: 14px;color: #ccc;font-weight: normal;transition: all .3s ease;
}                  

当输入框被聚焦的时候，标签会被添加.active class类，该class类会将它的top和left属性的值修改为0。另外.focusIn class类用于修改文字的颜色。

.custom-input label.active {top: 0;left: 0;font-size: 12px;
}.custom-input label.active.focusIn {color: #66afe9;
}                  

 初始化插件

在页面DOM元素加载完毕之后，可以通过phAnim()方法来初始化该浮动标签插件。

$(document).ready(function() {$('.custom-input input').phAnim();
}