Плавное отображение/скрытие блока
привет всем ... попросили меня сделать модальный блок - который плавно выезжаёт слева на право, а потом так же скрывается, в примере все видно. это у меня получилось.
но позже решили что этот блок должен плавно открываться сразу же при входе на сайт + если кликнуть по ссылке (меню) то он должен свернуться (закрыться) - а уже потом перейти на другую страницу. может кто-то знает как это реализовать, помогите пожалуйста. |
zerofx,
а если блок закрыли -- переходить по ссылке меню сразу? |
Цитата:
|
Цитата:
ну так и есть :) ну как я более буквально Вам объясню :) спасибо уважаемые а на счет кода .. только не кричите - куда его поместить? в основное тело функции - или создать новую? ... просто в голове столько всего за несколько дней .. сейчас натуплю и буду - опять у Вас спрашивать а почему оно не работает .. |
zerofx,
вас конкретно спросили ... :cray: смена названия кнопки закрыть/открыть - блок при открытии выдвигается - клик по меню обязательно предварительно закроет блок если он открыт ...
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<style type='text/css'>
#menu ul{list-style:none}
#menu li{float:left;margin:0 25px 0 0}
#menu a{padding:5px;font:18px 'Verdana';color:#F00;text-decoration:none}
#menu a:hover{padding:5px;border-bottom:solid 2px red;border-right:solid 2px red;border-left:solid 2px green;border-top:solid 2px green}
#panel{position:absolute;top:50%;left:-400px;margin:-40px 0 0 0;overflow:hidden}
#panel-content{background:#EEE;border:1px solid #CCC;width:388px;height:80px;float:left;padding:3px 5px}
#panel-sticker{float:left;position:relative;background:#FFA500;padding:3px 20px 3px 5px;margin:0;cursor:pointer}
#panel-sticker .close{position:absolute;right:3px;top:3px}
</style>
<script type='text/javascript'>
(function ($) {
$(document).ready(function () {
var $panel = $('#panel');
if ($panel.length) {
var $sticker = $panel.children('#panel-sticker');
var showPanel = function () {
$panel.animate({
left: '+=400'
}, 900, function () {
$(this).addClass('visible');
});
};
var hidePanel = function (href) {
$panel.animate({
left: '-=400'
}, 900, function () {
$(this).removeClass('visible');
href && (window.location = href)
});
};
showPanel();
$("#menu a").click(function (event) {
if ($panel.hasClass('visible')) {
event.preventDefault();
hidePanel(this.href)
}
})
$sticker
.children('span').click(function () {
if ($panel.hasClass('visible')) {
hidePanel();
$(this).text('Открыть')
} else {
showPanel();
$(this).text('Закрыть')
}
}).andSelf()
.children('.close').click(function () {
$panel.remove();
});
}
});
})(jQuery);
</script>
</head>
<body>
<div id="menu">
<ul>
<li><a href="http://javascript.ru/forum">Тест1</a></li>
<li><a href="http://javascript.ru">Тест2</a></li>
</ul>
</div>
<div id="panel">
<div id="panel-content">
Какой-то контент, который вы хотите показать.<br/>
Несколько строк<br/>
для наглядности
</div>
<div id="panel-sticker">
<span>Закрыть</span>
<div class="close">×</div>
</div>
</div>
</body>
</html>
|
извините пожалуйста я не понял ... блок изначально должен быть открыт - как только человек заходит на сайт - он открывается ... а теперь на счет меню - да такое условие. это так сказать такие понты ... при переходе на другую страницу, или клика по другой ссылке блок должен исчезать, т.е. пр'ятаться туда откуда вышел .. а потом уже должен происходить переход на другую страницу...
|
+ в ff стало не корректно работать, при переходе - по другой ссылке - в ff блок закрывается некорректно, а именно просто пропадает, в google chrom ок ... а в ie7-8 вообще не работает...
|
Цитата:
Цитата:
|
Благодарю Вас, вы действительно проффесор =) все же без посторонней помощи я еще не справляюсь. Спасибо Вам за терпение)
|
| Часовой пояс GMT +3, время: 02:25. |