Two letterbox switcher

by adamh

HTML

<div class="container">
    <div class="header">
        <div class="letterbox">
            <div class="slide" id="slide1">
            </div>
            <div class="slide" id="slide2">
            </div>
        </div>
        <div id="header-links">
            <div>
                <h2>About Audley</h2>
            </div>
            <div>
                <h2>Travel Inspiration</h2>
            </div>
            <div>
                <h2>Search for a Destination</h2>
            </div>
    </div>
</div>

CSS

body {
    padding: 10px;
    text-align: center;
    font-family: Arial, sans-serif;
}

h2 {
    font-family: 24px;
    font-weight: bold;
}

.container {
    margin: 0 auto;
    text-align: left;
    width: 976px;
}    

.header {
    background: #ddd;
    padding: 15px;
    border: 1px solid #a5a5a5;
}

.letterbox {
    width: 944px;
    height: 400px;
    position: relative;
}
.letterbox .slide {
    z-index: 10;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 470px;
    height: 400px;
    overflow: hidden;
    background: transparent url("http://media.audleytravel.com/-/media/Images/Home/Letterbox/2012letterbox6.ashx?w=700&as=1") top right;
    border-radius: 2px;
}
.letterbox #slide2 {
    z-index: 0;
    left: auto;
    right: 0px;
    background: transparent url("http://media.audleytravel.com/-/media/Images/Home/Letterbox/2012letterbox5.ashx?w=700&as=1") right top;
   
}

#header-links {
    height: 1%;
    overflow: auto;
    margin: 8px 0;
}

#header-links > div {
    width: 290px;
    padding: 10px;
    margin-right: 7px;
    float: left;
    background: white;
    text-align: center;
}

JavaScript

$('.slide').hover(
    function(ev){
        $(this).stop(true).animate({width: '700px'});
        $($(this).attr('id') == 'slide1' ? '#slide2' : '#slide1').stop(true).animate({width: '240px'});
    },
    function(ev){
        $('.slide').stop(true).animate({width: '470px'});
    }
);