Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Плавно увеличивающийся блок (https://javascript.ru/forum/dom-window/30905-plavno-uvelichivayushhijjsya-blok.html)

Ray Hamster 20.08.2012 05:24

Плавно увеличивающийся блок
 
Знаю, темка заезженная, но полистав форум все же решил зарегаться и описать свою проблему, ибо решения так и не нашел.

Опишу задачу полностью.
Значит, предположим, что есть сайт. Состоит он из 4 дивов 300 на 120 пикселей, которые расположены по центру в два столбика и две строки. В каждом из них есть какая то краткая информация. При нажатия, допустим, на первый блок, он растягивается вниз и занимает полностью первый столбик. Пока он тянется (считанные секунды), краткий контент плавно исчезает, а затем так же плавно появляется полный контент. При повторном нажатии либо активации другого блока предыдущий блок возвращается в исходное положение. 4 див, опять же 'допустим', при нажатии растягивается вверх и влево, тем самым закрывая собой все блоки.

Вот, подробно все описал, так как уже изрядно подз***ался.

Буду крайне благодарен тому, кто поможет.;)

melky 20.08.2012 07:32

В чём именно у Вас возникла проблема?

bes 20.08.2012 09:49

можно так http://javascript.ru/forum/events/29...-kartinki.html

Ray Hamster 20.08.2012 18:53

проблема в том, что я вообще не знаю, как это реализовать, ибо в яве нуб полный.
По сути нужно один блок заменить другим, большим в размере.

Ray Hamster 21.08.2012 23:08

Итак)
мне удалось сделать замену дива другим с помощью getElementById
все появляется в нужном месте и размере, как надо. Теперь мне нужно всего лишь сделать плавное появление второго дива.

Deff 21.08.2012 23:28

Ray Hamster,
Наверно setInterval и плавное приращение высоты - вплоть до полной, изначально в css для блока ставите высоту 0
После достижения полной высоты -удаляете id тамера, clearInterval(intervalID) , тем самым завершая его работу

Про setInterval - тут => http://javascript.ru/setinterval

Про изменение высоты элемента =>
document.getElementById("ID").style.height=XXpx

Ray Hamster 21.08.2012 23:39

Deff, а можно подробнее пожалуйста? И пример, если не трудно)
К тому же, нужно изменять не только высоту, но и ширину, да еще и по разным направлениям.
Я использовать getElementById не додумался бы как, если не вытащил бы из примера и не допилил бы под свои нужды :D

Deff 21.08.2012 23:45

Ray Hamster,
По всем сторонам - не Айс - опробировано - делайте для Высоты

Для начала создайте таймер с окончанием циклов 200/10 (т.е 20 запусков
пусть при запуске выводит alert 10*n ( n - номер запуска) - это и будет текущая высота
Начало скрипта
var n=0;

//тут определяем число циклов
nMax = 200/10 //10 приращение высоты;

var intervalID; //id Таймера - для стиранияж

//Тут таймер;
... тут в функция таймера {
alert('Высота=='+10*n);
n++; //наращиваем n;
}


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