Slide labels away from input on focus

labelSlider.js

// Requires jQuery easing

function moveLabels() {
    // Get the original position values
    var pos = $('#contact label').css('left').replace('px', '');

    $('input[type=text],textarea').focusin(function () {
        var label = $(this).prev('label');
        label.stop(true, false).animate({
            'left': -label.width() - pos
        }, 200);
    });

    // If the input is empty then animate it back in
    $('input[type=text],textarea').focusout(function () {
        if ($(this).attr('value') === '') {
            var label = $(this).prev('label');
            label.stop(true, false).animate({
                'left': pos
            }, 200);
        }
    });
}

TODO

• Turn into plugin
• Simplify code
• Position labels with JS to allow for fall-back