блок продолжает ехать)

421

31 декабря 2016, 16:01

блок продолжает ехать но должен заползать назад. должно получиться меню. и как сделать что бы при клике на пустоту блок закрывался? и фон затемнялся)

$('#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>

Answer 1

$(this).css("margin-left") - не вернет значение в процентах, а вернёт в пикселях. А вообще, я бы сделал чуть проще:

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>