Плавно выпадающий div

@ixapek · Регистрация: 18.05.2010

Студворк — интернет-сервис помощи студентам

Есть div с формой внутри, выпадающий по щелчку. как сделать плавную анимацию при выпадании. желательно на чистом jscript без подключения дополнительных файлов (jquery, mootools и т.д.)

@Alorian · 03.06.2010, 11:48

Каким образом он выпадает? Какие css свойства меняются при выпадении?
Начальные, конечные значения этих свойств?

@ixapek · 03.06.2010, 12:26 **[ТС]**

по щелчку свойство CSS block меняется с none на block. по повторному щелчку обратно

JavaScript
1
2
3
4
5
6
7
8
9
10
11
function open_message_form(div_id,area_id) 
{   
if (document.getElementById(div_id).style.display == 'block')
    {document.getElementById(div_id).style.display = 'none';}
else {
      document.getElementById(div_id).style.display = 'block';
     
      document.getElementById(area_id).focus();
        
       }
}

но хотелось бы, чтоб этот div плавно вниз выплывал

Добавлено через 33 минуты
все. вопрос закрыт. плюнул на все. подрубил jquery. +-170кб. ну и ладно. не думаю, что это большой ущерб

@Alorian · 03.06.2010, 12:35

Смотри сам. Интересная задачка. Я давно хотел заняться.
Сегодня вечером я над ней пару часов в любом случае посижу.

Основные моменты впринципе понятны.
Нужно поставить таймер который будет менять высоту блока, либо двигать и менять высоту блока, до тех пор пока высота не станет 100 процентов и элемент не займет нужную позицию.
Можно поиграться с отрицательными z-index, чтобы контейнер выползал изпод другого контейнера.

Примерное решение я уже придумал, надо его на практике посмотреть:
1. Выставляем position:absolute у вложенных в див элементов, выравниваем их относительно нижнего края дива. bottom:0;
2. Начинаем менять высоту по таймеру от 0, до высоты дива. Так как мы выровняли вложенные элементы по низу дива, то сначала появятся нижние элементы, потом с увеличением высоты будут появляться все больше и больше вложенных элементов, пока не появятся все.

Как то так. Сегодня вечером постараюсь сделать. Посмотрим что будет на практике.

@ixapek · 03.06.2010, 12:41 **[ТС]**

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<a href="" class="add_message" id="click_mes_form"><p>Добавить сообщение</p></a>
<script type="text/javascript">
$(document).ready(function(){
    $(".add_message").click(function(){
        $("#popup_message_form").slideToggle("slow");
        $(this).toggleClass("active"); return false;
    });
});
</script>
<div class="wall_form" id="popup_message_form" style="display:none;"> <!--Выползающий див-->
 
....Тут формочка для ввода сообщения...
 
</div>

вот как то так через JQuery получилось.
По поводу таймера - написал примерно так как ты говорил, валидатор функцию одобрил. но браузеры упрямо писали, что ошибка. и выдвигать ДИВ не собирались

@Alorian · 03.06.2010, 12:45

Про jquery я в курсе. Там это элементарно делается. Кстати как вариант можно в его исходниках функцию slideToggle посмотреть. Исходники вроде бы общедоступные. После того как велосипед сделаю сравню

но браузеры упрямо писали, что ошибка. и выдвигать ДИВ не собирались

Firebug какую ошибку показывает? Скопируй текст.

@ixapek · 03.06.2010, 12:47 **[ТС]**

файрбагом не проверял. у меня его нету((( я по старинке

@рони · 03.06.2010, 13:43

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
  <title>Плавно выпадающий div</title>
 <meta http-equiv="content-type" content="text/html; charset=windows-1251" />
</head>
 
<body>   <input type="button" name="go1" value="go1" onclick="show('hide1',100,-3)" />
<input type="button" name="go2" value="go2" onclick="show('hide2',100,3)" />
<div id=hide1 style="display:block; background-color: #FFFF00; height: 100px    ">
Тут любой ХТМЛ код который по умолчанию открыт 1
<br />
<br />
<br />
</div>
 
<div id=hide2 style="display:none; background-color: #FF0000;height: 100px  ">
Тут любой ХТМЛ код который по умолчанию скрыт 1
<br />
<br />
<br />
</div>
 <script language="JavaScript" type="text/javascript">
 /*<![CDATA[*/
 var s=[],s_timer=[];
 function show(id,h,v)//id элемента,h высота ,v скорость ---(-v) если блок надо первоначально закрывать
 { s[id]= s[id]==v? -v : v;
    s_timer[id]=setTimeout(function() {
    var obj=document.getElementById(id);
    if(obj.offsetHeight+s[id]>=h){obj.style.height=h+"px";obj.style.overflow="auto";}
    else if(obj.offsetHeight+s[id]<=0){obj.style.height=0+"px";obj.style.display="none";}
    else {obj.style.height=(obj.offsetHeight+s[id])+"px";
    obj.style.overflow="hidden";
    obj.style.display="block";
    setTimeout(arguments.callee, 10);
    }
  }, 10);
 }
 /*]]>*/
 </script>
 
</body>
 
</html>

Добавлено через 33 минуты
тоже самое плюс ширина блока

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
  <title>Плавно выпадающий div</title>
 <meta http-equiv="content-type" content="text/html; charset=windows-1251" />
</head>
 
<body>   <input type="button" name="go1" value="go1" onclick="show('hide1',100,400,-3)" />
<input type="button" name="go2" value="go2" onclick="show('hide2',200,200,3)" />
<div id=hide1 style="display:block; background-color: #FFFF00; height: 100px; width: 400px    ">
Тут любой ХТМЛ код который по умолчанию открыт 1
<br />
<br />
<br />
</div>
 
<div id=hide2 style="display:none; background-color: #FF0000;height: 200px ;width: 200px ">
Тут любой ХТМЛ код который по умолчанию скрыт 1
<br />
<br />
<br />
</div>
 <script language="JavaScript" type="text/javascript">
 /*<![CDATA[*/
 var s=[],s_timer=[];
 function show(id,h,w,v)//id элемента,h высота ,v скорость ---(-v) если блок надо первоначально закрывать
 { s[id]= s[id]==v? -v : v;
    s_timer[id]=setTimeout(function() {
    var obj=document.getElementById(id);
    var v_w = Math.ceil((w*s[id])/h);
    if(obj.offsetHeight+s[id]>=h){obj.style.height=h+"px";obj.style.width=w+"px";obj.style.overflow="auto";}
    else if(obj.offsetHeight+s[id]<=0){obj.style.height=0+"px";obj.style.width=0+"px";obj.style.display="none";}
    else {obj.style.height=(obj.offsetHeight+s[id])+"px";
    obj.style.width=(obj.offsetWidth+v_w)+"px";
    obj.style.overflow="hidden";
    obj.style.display="block";
    setTimeout(arguments.callee, 10);
    }
  }, 10);
 }
 /*]]>*/
 </script>
 
</body>
 
</html>

@Alorian · 03.06.2010, 13:45

рони, Сам писал?
Смотреть пока не буду. Помаюсь самостоятельно)

@рони · 03.06.2010, 13:50

Alorian, да сам)

@ixapek · 03.06.2010, 15:30 **[ТС]**

ещё вопрос - при щелчке на ссылке Добавить сообщение, выезжает div с формой. как установить фокус на поле ввода сразу после показа формы?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<a href="" class="add_message" id="click_mes_form"><p>Добавить сообщение</p></a>
<script type="text/javascript">
$(document).ready(function(){
    $(".add_message").click(function(){
        $("#popup_message_form").slideToggle("slow");
        $(this).toggleClass("active"); return false;
    });
});
</script>
<div class="wall_form" id="popup_message_form" style="display:none;">
<form action="#" method="post" target="_self">
<textarea name="text" cols="34" rows="5" onkeypress="ctrlEnter(submit_id);" id="area" style="overflow:hidden;"></textarea><br>
<input name="" type="submit" value="Отправить" id="submit_id" />
</form>
</div>

@component6 · 06.06.2010, 15:20

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

setTimeout(arguments.callee, 10);

Рони объясни пожалуйста что такое arguments.callee?
И почему SetTimeout повторяется (должен же один выполняться)?

@рони · 06.06.2010, 15:53

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

Рони объясни пожалуйста что такое arguments.callee?
И почему SetTimeout повторяется (должен же один выполняться)?

arguments.callee по русски это ссылка функции на саму себя а если внутри функции есть таймер то таймер и запускаеться каждый раз пока размеры по условию не равны конечным

06.02.2012, 14:14

HTML5
1
<div id=hide1 style="display:block; background-color: #FFFF00; height: 100px    ">

Тут любой ХТМЛ код который по умолчанию открыт 1

Рони, а как сделать чтобы по умолчанию первый блок был закрыт?

Добавлено через 28 минут
Все) туплю, разобрался) надо было просто у дива изменить стиль с "display: block;" на "display:none;"

Новые блоги и статьи Все статьи Все блоги /
Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .	My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .	Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.	Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .
Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .	Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .

@ixapek 15 / 14 / 2 Регистрация: 18.05.2010 Сообщений: 118

	Плавно выпадающий div 03.06.2010, 10:51. Показов 22164. Ответов 13 Метки нет (Все метки) Есть div с формой внутри, выпадающий по щелчку. как сделать плавную анимацию при выпадании. желательно на чистом jscript без подключения дополнительных файлов (jquery, mootools и т.д.) 0

@Alorian 694 / 534 / 40 Регистрация: 22.06.2009 Сообщений: 1,293
	03.06.2010, 11:48
	Каким образом он выпадает? Какие css свойства меняются при выпадении? Начальные, конечные значения этих свойств? 0

@Alorian 694 / 534 / 40 Регистрация: 22.06.2009 Сообщений: 1,293
	03.06.2010, 12:35
	Смотри сам. Интересная задачка. Я давно хотел заняться. Сегодня вечером я над ней пару часов в любом случае посижу. Основные моменты впринципе понятны. Нужно поставить таймер который будет менять высоту блока, либо двигать и менять высоту блока, до тех пор пока высота не станет 100 процентов и элемент не займет нужную позицию. Можно поиграться с отрицательными z-index, чтобы контейнер выползал изпод другого контейнера. Примерное решение я уже придумал, надо его на практике посмотреть: 1. Выставляем position:absolute у вложенных в див элементов, выравниваем их относительно нижнего края дива. bottom:0; 2. Начинаем менять высоту по таймеру от 0, до высоты дива. Так как мы выровняли вложенные элементы по низу дива, то сначала появятся нижние элементы, потом с увеличением высоты будут появляться все больше и больше вложенных элементов, пока не появятся все. Как то так. Сегодня вечером постараюсь сделать. Посмотрим что будет на практике. 0

@ixapek 15 / 14 / 2 Регистрация: 18.05.2010 Сообщений: 118
	03.06.2010, 12:47 [ТС]
	файрбагом не проверял. у меня его нету((( я по старинке 0

@Alorian 694 / 534 / 40 Регистрация: 22.06.2009 Сообщений: 1,293
	03.06.2010, 13:45
	рони, Сам писал? Смотреть пока не буду. Помаюсь самостоятельно) 0

@рони 35 / 35 / 6 Регистрация: 26.02.2010 Сообщений: 62
	03.06.2010, 13:50
	Alorian, да сам) 0