Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Плавно скрыть панель (https://javascript.ru/forum/jquery/20625-plavno-skryt-panel.html)

debugx 11.08.2011 16:37
Плавно скрыть панель
 
Всем привет,
На сайте справа сбоку прилеплена панель.
Ее нужно скрывать плавно слева на право.
Делаю так:
$("#myPanel").animate(
{
    marginLeft: parseInt($("#myPanel").css('marginLeft'), 10) == 0 ?
    $("#myPanel").outerWidth() : 0
});

панель при этом уезжает на право, но это не совсем то, что мне нужно.
Вот html:
<div id="containerDiv">
    <div id="myPanel" style="float: right;">Боковая панель</div>
    <div id="Data">сайт</div>
</div>

Т.е. вопрос такой
Как настроить containerDiv, чтобы когда панель уезжала, она его не растягивала, а скрывалась за его края

walik 11.08.2011 16:47
Контейнеру присвоить position: relative; и панельке position: absolute;
и манипулировать свойством left вместо margin

debugx 11.08.2011 18:00
Вот набросал простой пример, сделал так как вы сказали:
<html>
<head>
	<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<script type="text/javascript">
	function showHidePanel()
	{
		$("#myPanel").animate(
		{
			left: parseInt($("#myPanel").css('left'), 10) == 0 ?
			$("#myPanel").outerWidth() : 0
		});
	}
</script>
<div>
	<div onclick="showHidePanel();">
        XXX
    </div>
</div>
<div id="containerDiv" style="position: relative;width:800px;border: 1px solid #cecece;">
	<div id="myPanel" style="position: absolute;margin-left:700px;">Боковая панель</div>
	<div id="Data">сайт</div>
</div>
</body>
</html>

При нажатии на XXX панель уходит за границы контейнера, но она не скрывается, текст внутри нее скукоживается, но сама она остается видна :(

devote 11.08.2011 18:02 
<div id="myPanel" style="position: absolute;margin-left:700px; overflow: hidden;">Боковая панель</div>

debugx 11.08.2011 18:12
Цитата:
Сообщение от devote (Сообщение 119863) 
<div id="myPanel" style="position: absolute;margin-left:700px; overflow: hidden;">Боковая панель</div>
все-равно не скрывается

devote 11.08.2011 18:19 
<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<script type="text/javascript">
    function showHidePanel()
    {
        $("#myPanel").animate(
        {
            left: parseInt($("#myPanel").css('left'), 10) == 0 ?
            $("#myPanel").outerWidth() : 0
        });
    }
</script>
<div>
    <div onclick="showHidePanel();">
        XXX
    </div>
</div>
<div id="containerDiv" style="position: relative;width:800px;border: 1px solid #cecece; overflow: hidden;">
    <div id="myPanel" style="position: absolute;margin-left:700px;">Боковая панель</div>
    <div id="Data">сайт</div>
</div>
</body>
</html>


Часовой пояс GMT +3, время: 17:14.