Alternate div slides through animation

Toggleing between two div using animation

by Budhram Gurung

HTML

<div class="siteMap">
    <div class="mapButton"></div>
    <div class="theMap" style="background:red;">content here</div>
</div>
<div class="siteMap" style="margin-top:70px;">
    <div class="mapButton"></div>
    <div class="theMap" style="background:blue;">content here</div>
</div>

CSS

.siteMap {
    width:200px;
    position:fixed;
    left:-200px;
    top:0px;
    display:block;
    color:#FFF;
    z-index:2;
    opacity: 0.95;
}
.siteMap .mapButton {
    display:block;
    color:#333;
    background-color:#ACACAC;
    height:50px;
    width:50px;
    text-align:center;
    position:absolute;
    left: 200px;
    cursor:pointer;
}
.siteMap .theMap {
    width:100%;
    height:100px;
    background-color:#666;
    position:relative;
}

JavaScript

$('.mapButton').click(function () {
    var $siteMap = $(this).parent('.siteMap');
    var mapPos = parseInt($siteMap.css('left'), 10);
    if (mapPos < 0) {
        $siteMap.animate({
            left: '+=200'
        }, 458, 'swing', function () {
            // Animation complete.
        });
    } else {
        $siteMap.animate({
            left: '-=200'
        }, 458, 'swing', function () {
            // Animation complete.
        });
    }
    $('.siteMap').not($siteMap).filter(function () {
        return parseInt($(this).css('left'), 10) == 0
    }).animate({
        left: '-=200'
    }, 458, 'swing', function () {
        // Animation complete.
    });
});