another slide out onclick

by ian_smithz

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<div class="pollSlider"></div>
<div id="pollSlider-button"></div>

CSS

.pollSlider{
    position:fixed;
    height:100%;
    background:red;
    width:200px;
    right:0px;
    margin-right: -200px;
}
#pollSlider-button{
    position:fixed;
    width:100px;
    height:50px;
    right:0px;
    background:green;
    top:300px;
}

JavaScript

$(document).ready(function()
{
    var slider_width = $('.pollSlider').width();//get width automaticly
  $('#pollSlider-button').click(function() {
    if($(this).css("margin-right") == slider_width+"px" && !$(this).is(':animated'))
    {
        $('.pollSlider,#pollSlider-button').animate({"margin-right": '-='+slider_width},'slow','easeOutBounce');
    }
    else
    {
        if(!$(this).is(':animated'))//perevent double click to double margin
        {
            $('.pollSlider,#pollSlider-button').animate({"margin-right": '+='+slider_width},'slow','easeInQuart');
        }
    }


  });
 });