Плавно выпадающий 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;"

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Access VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

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

	Плавно выпадающий div 03.06.2010, 10:51. Показов 22046. Ответов 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