slide it

by Nikita Jadhao

HTML

<div id="slideleft" class="slide">
    <div class="inner">move...</div>
    <div class="right">...move</div>
    <button class="click">slide it</button>
</div>

CSS

.slide {
    position: relative;
}
.slide .inner {
    position: absolute;
    left: 0;
    width: 49%;
    height: 36px;
    padding: 6px;
    background-color: #4c5;
    color: #333;
}
.slide .right {
    position: absolute;
    left: 49%;
    bottom: 0;
    width: 49%;
    height: 36px;
    padding: 6px;
    background-color: #adf;
    color: #333;
    top:0px;
    text-align:right;
}
.click {
    position:absolute;
    margin-top:30px;
    margin-left:45%;
}

JavaScript

$(document).ready(function () { $('button').click(function () {

        var $lefty = $(".inner");

          $lefty.animate({   left: parseInt($lefty.css('left'), 10) == 0 ?      - $lefty.outerWidth() :     0  
        });

        var $marginLefty = $(".right");

        $marginLefty.animate({
            marginLeft: parseInt($marginLefty.css('marginLeft'), 10) == 0 ? $marginLefty.outerWidth() : 0
        });

         
    });
});