Форум

ureech · #1 (**permalink**) 11.05.2015, 13:18

Здравствуйте.Пытаюсь сделать выдвижную боковую панель.Сделал так.
css

.window{
position:fixed;
z-index:99;
right:-12%;
top:0%;
width:12%;
height:100%;
float:right;
}

js

$("#panel").click(function(){ 	
$(".window").css({right:"0"});
$(".window").toggleClass("fadeInRight animated");
});

Подскажите как доделать, что бы обратно панель заезжала?Т.е при клике снова вернуть right:-12%;

artemdemo · #2 (**permalink**) 11.05.2015, 19:39

А зачем у вас еще и float:right прописан если и так position:fixed?

А вообще судя по всему проблема в том, что вы по клику убираете класс с прописанной анимацией, вот она и перестает работать в обратную сторону.
Повести анимацию на класс .window

Так же лучше через JS стили не вешать, вы же и так класс добавляете, вот и пропишите в него right: 0

Slup · #3 (**permalink**) 12.05.2015, 17:58

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
		<!--code by newLifeJS-->
		<title>Panel</title>
		<style type="text/css" media="screen">
			.window {
				position: fixed;
				width: 300px;
				height: -webkit-calc(100% - 2px); height: calc(100% - 2px);
				top: 0;
				right: -200px;
				background-color: rgba(0,0,0,0.3);
				border: 1px solid black;
				border-radius: 10px 0 0 10px;
				cursor: pointer;
				color: rgba(4,4,4,0.0);
				font-size: 100px;
				text-align: center;
				line-height: 2;
			}

		</style>
	</head>
	<body>
		<div class="window">Hello</div>
	</body>
	<script>
		$(function() {
		  $('.window').click(function() {
			 if ($(this).css('right') !== '0px') {
			     $(this).animate({'right':'0'}, function(){
			         $(this).css('color','white');
			     });
			 } else {
			     $(this).css('color','rgba(4,4,4,0.0)').animate({'right':'-200px'});
			 }
		  });
	      });
	</script>
</html>

Форум

Справочник

Discord чат

Курсы javascript