Выдвижная панель
Здравствуйте.Пытаюсь сделать выдвижную боковую панель.Сделал так.
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%; |
А зачем у вас еще и float:right прописан если и так position:fixed?
А вообще судя по всему проблема в том, что вы по клику убираете класс с прописанной анимацией, вот она и перестает работать в обратную сторону. Повести анимацию на класс .window Так же лучше через JS стили не вешать, вы же и так класс добавляете, вот и пропишите в него right: 0 |
<!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>
|
| Часовой пояс GMT +3, время: 03:22. |