jquery.easing.js实现的酷酷的input的动画效果

今天无意中发现了一个很酷炫的输入框的效果，特记录下来。

先mark一下，怕以后想用的时候找不到了。

看下效果图吧：

html代码

<main>
    <h1>Fieldset style float labels</h1>
    <form class="flp">
        <div>
            <input type="text" id="fname" />
            <label for="fname">First Name</label>
        </div>
        <div>
            <input type="text" id="email" />
            <label for="email">Email</label>
        </div>
    </form>
</main>

<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>

js代码

//breakdown the labels into single character spans
$(".flp label").each(function() {
    var sop = '<span class="ch">'; //span opening
    var scl = '</span>'; //span closing
    //split the label into single letters and inject span tags around them
    $(this).html(sop + $(this).html().split("").join(scl + sop) + scl);
    //to prevent space-only spans from collapsing
    $(".ch:contains(' ')").html(" ");
})

var d;
//animation time
$(".flp input").focus(function() {
    //calculate movement for .ch = half of input height
    var tm = $(this).outerHeight() / 2 * -1 + "px";
    //label = next sibling of input
    //to prevent multiple animation trigger by mistake we will use .stop() before animating any character and clear any animation queued by .delay()
    $(this).next().addClass("focussed").children().stop(true).each(function(i) {
        d = i * 50; //delay
        $(this).delay(d).animate({
            top: tm
        }, 200, 'easeOutBack');
    })
})
$(".flp input").blur(function() {
    //animate the label down if content of the input is empty
    if ($(this).val() == "") {
        $(this).next().removeClass("focussed").children().stop(true).each(function(i) {
            d = i * 50;
            $(this).delay(d).animate({
                top: 0
            }, 500, 'easeInOutBack');
        })
    }
})

css代码

/*importing Sniglet*/

@import url("http://fonts.googleapis.com/css?family=Sniglet");
/*basic reset*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    padding-top: 100px;
    background: hsl(120, 40%, 40%);
    font-family: Sniglet;
}
main {
    width: 500px;
    margin: 0 auto;
    padding-bottom: 10px;
    background: white;
    border-radius: 3px;
    overflow: hidden;
}
h1 {
    font-size: 24px;
    font-weight: normal;
    background: hsl(120, 40%, 95%);
    color: hsl(120, 40%, 40%);
    text-align: center;
    padding: 20px 0;
    margin-bottom: 40px;
}
.flp {
    padding: 0 50px;
}
/*Let's place the label over the input*/

.flp div {
    position: relative;
    margin-bottom: 30px;
}
.flp input,
.flp label {
    width: 400px;
    display: block;
    font: inherit;
    font-size: 16px;
    line-height: 24px;
    /*fixed height for FF line height issue. 
	height = 24(lineheight) + 10*2(padding) + 2(border)*/
    
    height: 46px;
    border: 1px solid #999;
}
.flp input {
    padding: 10px;
    outline: none;
    border-radius: 3px;
}
.flp label {
    position: absolute;
    left: 0;
    top: 0;
    /*left/right padding will be 2px less, adjusted by padding on .ch*/
    
    padding: 10px 8px;
    border-color: transparent;
    color: #666;
    cursor: text;
}
/*label styles*/

.ch {
    display: block;
    float: left;
    position: relative;
    /*for upward animation*/
    
    background: white;
}
.ch:first-child {
    padding-left: 2px;
}
.ch:last-child {
    padding-right: 2px;
}
/*active input label*/

.focussed {
    /*when any input is already focussed clicking on it(label) again won't do anything*/
    
    pointer-events: none;
}