jQuery在表单输入实现时提示文字滑动效果。

本文的示例说明当jQuery实现表单输入时，文本向上滑动的效果：

表单的输入框的jQuery实现提示基于当没有输入，提示文字在输入框中显示的文本框，当鼠标点击进入文本，文本输入框滑出，性格也聪明的外观，用户体验好，因此一些对CSS3属性的使用，在测试中，请尝试使用高IE9或Chrome和Firefox浏览器版本。

运行效果的截图如下：
具体代码如下：

jQuery人性化表单标签提示
函数（$）{
var默认值= {
位置：顶部
animationtime：500，
放松：放松
偏移量：20，
HidePlaceholderOnFocus：真的
}；
美元。fn.animatelabel =功能（设置按钮）{
VaR的位置= btn.data（位置）| | settings.position，
POSx = 0，
铭文= 0；
美元（这个）。Css（{
左：自动
右：自动
位置：绝对
WebKit的转型：所有+ settings.animationtime + + settings.easing，
-moz过渡：所有+ settings.animationtime + + settings.easing，
MS过渡：所有+ settings.animationtime + + settings.easing，
转型：+ settings.animationtime + + settings.easing
}）；
开关（位置）{
case'top：
POSx = 0；
波西=（$（this）。Height（）+设置。偏移量）×1；
美元（这个）。Css（{
顶部：0
不透明：1
WebKit的变换：translate3d（+条POSx +
-moz变换：translate3d（+条POSx +
MS变换：translate3d（+条POSx +
变换：translate3d（+条POSx +
}）；
打破；
case'bottom：
POSx = 0；
波西=（$（this）。Height（）+设置。偏移）；
美元（这个）。Css（{
底部：0
不透明：1
WebKit的变换：translate3d（+条POSx +
-moz变换：translate3d（+条POSx +
MS变换：translate3d（+条POSx +
变换：translate3d（+条POSx +
}）；
打破；
case'left：
POSx =（$（this）。Width（）+设置。偏移量）×1；
铭文= 0；
美元（这个）。Css（{
左：0，
顶部：0，
不透明：1
WebKit的变换：translate3d（+条POSx +PX+花束+PX，0），
-moz变换：translate3d（+条POSx +PX+花束+PX，0），
MS变换：translate3d（+条POSx +PX+花束+PX，0），
变换：translate3d（+条POSx +PX+花束+PX，0）。
}）；
打破；
case'right：
POSx = $（this）。Width（）+ settings.offset；
铭文= 0；
美元（这个）。Css（{
右：0，
顶部：0，
不透明：1
WebKit的变换：translate3d（+条POSx +PX+花束+PX，0），
-moz变换：translate3d（+条POSx +PX+花束+PX，0），
MS变换：translate3d（+条POSx +PX+花束+PX，0），
变换：translate3d（+条POSx +PX+花束+PX，0）。
}）；
打破；
}
}
美元。fn.removeanimate =功能（设置按钮）{
VaR的位置= btn.data（位置）| | settings.position，
POSx = 0，
铭文= 0；
美元（这个）。Css（{
顶部：0
不透明：0
WebKit的变换：translate3d（+条POSx +
-moz变换：translate3d（+条POSx +
MS变换：translate3d（+条POSx +
变换：translate3d（+条POSx +
}）；
}
美元。fn.label_better =功能（选项）{
var设置（默认值、扩展名、选项），
EL = $（这个），
触发=焦点
triggerout =模糊；
如果（settings.easing = =反弹settings.easing =Bezier）（0.175，0.885，0.420，1.310）
el.each（函数（指数值）{
VaR建立美元（这），
位置= btn.data（位置）| | settings.position；
Btn.wrapAll（）
如果（btn.val（）。长> 0）{
var text = btn.data（新占位符）| | btn.attr（占位符）；
$（++）。Css（不透明
}
Btn.bind（触发，函数（）{（）{
如果（btn.val（）。长度＜1）{
var text = btn.data（新占位符）| | btn.attr（占位符），
位置= btn.data（位置）| | settings.position；
$（++）。Css（不透明
}
如果（settings.hideplaceholderonfocus = = true）{
btn.data（默认占位符
Btn.attr（占位符
}
Btn.parent（），发现（。lb_label）。AddClass（主动）；
}）。Bind（triggerout，函数（）{（）{
如果（btn.val（）。长度＜1）{
Btn.parent（），发现（。lb_label）。Bind（transitionend webkittransitionend otransitionend mstransitionend
}
如果（settings.hideplaceholderonfocus = = true）{
Btn.attr（占位符
btn.data（默认占位符
}
Btn.parent（），发现（。lb_label）。RemoveClass（主动）；
}）；
}）；
}
}（窗口。jQuery）；
{ HTML
身高：100%；
}
{体
背景：# 272d30；
填充：0；
文本对齐：中心；
字体：‘无'；
职位：相对；
保证金：0；
身高：100%；
}
{。包装
高度：自动！重要；
身高：100%；
保证金：0汽车；
溢出：隐藏；
}
{
文字装饰：无；
}
H1、H2 {
宽度：100%；
浮点数：左；
}
{ H1
边距：100px；
颜色：# FFF；
文字阴影：0 1px 5px RGBA（0,0,0,0.5）；
边距：5px；
字体大小：70px；
字母间距：- 4px；
}
{ H2
颜色：# 5f7591；
字体粗细：粗体；
文字阴影：0 1px 5px RGBA（0,0,0,0.5）；
边距顶部：0；
边距：10px；
}
{。指针
颜色：# 9b59b6；
字体家庭：'pacifico，草书；
字体大小：30px；
边距：15px；
}
{pre
保证金：80px汽车；
}
{预编码
填料：35px；
边界半径：5px；
字体大小：15px；
背景：RGBA（0,0,0,0.1）；
Border: RGBA (0,0,0,0.05) 5px solid;
马克斯：500px宽度；
}
{为主。
浮点数：左；
宽度：100%；
保证金：0汽车；
}
主H1
填料：20px 50px；
浮点数：左；
宽度：100%；
字体大小：60px；
盒尺寸：边框框；
Webkit盒尺寸：边界盒；
-moz盒尺寸：边界盒；
字体重量：100；
保证金：0；
25px垫上；
字体家庭：'pacifico；
字母间距：2px；
}
{ h1.demo1为主。
背景：# 1abc9c；
}
{。reload.bell
字体大小：12px；
填料：20px；
宽度：45px；
文本对齐：中心；
身高：47px；
边界半径：50px；
WebKit的边界半径：50px；
-moz边界半径：50px；
}
reload.bell { #通知。
字体大小：25px；
线高度：140%；
}
。重装，Btn {。
显示：内联块；
边境：4px固体# a2261e；
边界半径：5px；
-moz边界半径：5px；
WebKit的边界半径：5px；
背景：# cc3126；
显示：内联块；
线高度：100%；
填料：0.7em；
文字装饰：无；
颜色：# FFF；
宽度：100px；
线高度：140%；
字体大小：17px；
字体系列：开放SAN；
字体粗细：粗体；
}
重新加载：悬停{
背景：# a2261e；
}
{。按钮
宽度：200px；
颜色：# FFF；
边界：无；
左：10px保证金；
背景：RGBA（255, 255, 255，0.11）；
}
{清晰。
宽度：自动；
}
。按钮：悬停，悬停按钮：{。
背景：RGBA（255255255,0.3）；
}
{。BTNs
宽度：410px；
保证金：50px汽车；
}
{。信用
字体样式：斜体；
文本对齐：中心；
颜色：# FFF；
填料：10px；
保证金：00 40px 0；
浮点数：左；
宽度：100%；
}
信用卡
颜色：# CCC；
文字装饰：无；
字体粗细：粗体；
}
{。回来
位置：绝对；
顶部：0；
左：0；
文本对齐：中心；
显示块；
填料：7px；
宽度：100%；
盒尺寸：边框框；
-moz盒尺寸：边界盒；
Webkit盒尺寸：边界盒；
背景：RGBA（0, 0, 0，0.65）；
字体粗细：粗体；
字体大小：13px；
颜色：# FFF；
WebKit的过渡：所有200ms自在；
-moz过渡：所有200ms自在；
- O转换：所有200ms自在；
过渡：所有的200ms自在；
}
{返回：悬停
背景：RGBA（0, 0, 0，0.85）；
}
{。bl_form
150px保证金：0；
}
bl_form {输入。
15px垫上；
背景：RGBA（255255255,0.10）；
盒子的影子：0 2px 8px RGBA（0,0,0,0.2）；
边界：无；
颜色：白色；
填料：10px 15px；
边界半径：25px；
字体大小：16px；
大纲：无；
}
。lb_wrap。lb_label。顶，lb_wrap.lb_label.bottom {。
左：15px！重要；
}
lb_wrap.lb_label.left {。
左：0；
}
{。lb_label
字体粗细：粗体；
颜色：# 999；
}
{。lb_label.active
颜色：# FFF；
}
$（文档）Ready（函数（）{）
$（。label_better ）。label_better（{
放松：反弹
}）；
}）；

jQuery标签更好
像老板一样给表单输入标签
由Pete R.创立，创始人bucketlistly


希望本文能对大家的jQuery程序设计有所帮助。