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

Новые блоги и статьи Все статьи Все блоги /
Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .
Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и напряжениями. Надо найти токи в ветвях. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и решает её. Последовательность действий:. . .	Новый CodeBlocs. Версия 25.03 palva 04.01.2026 Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .	Модель микоризы: классовый агентный подход anaschu 02.01.2026 Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .

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

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