expanding search bar

jQuery version of http://tympanus.net/Tutorials/ExpandingSearchBar/?search=vvcvxcvcxvxcvxcvxcvxcvxcvxcvxcvxcvxcv

by Alexus fox

HTML

<h1> search bar</h1>

<form>
    <div class="right search">
        <img src="http://dummyimage.com/600x400/000/fff.jpg" />
        <label>
            <input name="search"/>
        </label>
    </div>
</form>

CSS

div.right {
    height:48px;
    text-align:right;
    overflow:hidden;
    border:0;
    margin:0;
    padding:0;
}
.search>img {
    display:inline-block;
    width:48px;
    height:48px;
    background:pink;
    border:0;
    margin:0;
    padding:0;
}
.search>label {
    display:inline-block;
    position:absolute;
    right:-248px;
    width:200px;
    height:48px;
    margin:auto;
    background:white;
    z-index:-1;
        text-align:left;
}
.search>label.expanded {
    z-index:0
}
.search input {
    margin-top:10px;
    height:30px;
    width:190px;
    border:transparent;
    background-color:beige;
    font-size:1.2em;
    outline: none;

}
body {
    background:pink;
    color:white;
    border:0;
    margin:0;
    padding:0;
    overflow:hidden;
}

JavaScript

$(function () {
    $('.search img').click(function () {
        var img = $(this),
            label = img.siblings('label'),
            expanded = label.is(".expanded")
            if (expanded) {
                label.removeClass('expanded').animate({
                    right: -248
                })
            } else {
                label.animate({
                    right: 48
                }, function () {
                    label.addClass('expanded').find('input').focus()
                })
            }
    })
    $(".search input").blur(function () {
        $(this).closest('.search').find('img').click()
    })
})