Форум

debugx · #1 (**permalink**) 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 · #2 (**permalink**) 11.08.2011, 16:47

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

debugx · #3 (**permalink**) 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 · #4 (**permalink**) 11.08.2011, 18:02

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

debugx · #5 (**permalink**) 11.08.2011, 18:12

Сообщение от devote

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

все-равно не скрывается

devote · #6 (**permalink**) 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>

Форум

Справочник

Discord чат

Курсы javascript