Ragas1 sliding label

by LinkinTED

HTML

<div class="wrap">
    <label>Number 1</label>
    <div><input type="text" value="Number 2" /></div>
</div>

CSS

* { box-sizing: border-box; font-size: 16px; }
.wrap {
    width: 60%;
    overflow: auto;
}
label {
    background: #d74142;
    float: left;
    padding: .5em;
    position: relative;
}
.wrap>div {
    background: lightgrey;
    height: 100%;
    overflow: hidden;
    display: block;
}
.wrap>div>input {
    border: 0;
    padding: .5em;
    margin: 0;
    background: lightgrey;
    width: 100%;
}

JavaScript

$(document).ready(function() {
    $('div>input').on('focus', function() {
        $(this).parent().parent().find('label').animate({marginLeft:'-100%'}, {duration: 1000});
    });
    $('div>input').on('blur', function() {
         $(this).parent().parent().find('label').animate({marginLeft:'0'}, {duration: 1000});
    });
});