the block continues to go but must crawl back. Should get a menu. and how to make it so that when you click on a void the block closes? and the background was darkened)

$('#pollSlider-button').click(function() { if($(this).css("margin-left") == "70%") { $('.pollSlider').animate({"margin-left": '-=70%'}); $('#pollSlider-button').animate({"margin-left": '-=70%'}); } else { $('.pollSlider').animate({"margin-left": '+=70%'}); $('#pollSlider-button').animate({"margin-left": '+=70%'}); } }); 
 .pollSlider{ position:fixed; height:100%; background:red; width:70%; left:0px; margin-left: -70%; } #pollSlider-button{ position:fixed; width:100px; height:50px; left:0px; background:green; top:100px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="pollSlider"></div> <div id="pollSlider-button"></div>

    1 answer 1

    $(this).css("margin-left") - will not return a value in percent, but return in pixels. In general, I would make it a bit easier:

     var pollSlider = $('.pollSlider'); $('#pollSlider-button').click(function() { pollSlider.toggleClass('slide-left'); }); 
     .pollSlider { position: fixed; height: 100%; background: red; width: 70%; left: 0px; margin-left: -70%; -webkit-transition: margin-left .5s linear; transition: margin-left .5s linear; } #pollSlider-button { position: absolute; width: 100px; height: 50px; right: 0; margin-right: -100px; background: green; top: 100px; } .slide-left { margin-left: 0; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="pollSlider"> <div id="pollSlider-button"></div> </div>