Плавно увеличивающийся блок
Знаю, темка заезженная, но полистав форум все же решил зарегаться и описать свою проблему, ибо решения так и не нашел.
Опишу задачу полностью. Значит, предположим, что есть сайт. Состоит он из 4 дивов 300 на 120 пикселей, которые расположены по центру в два столбика и две строки. В каждом из них есть какая то краткая информация. При нажатия, допустим, на первый блок, он растягивается вниз и занимает полностью первый столбик. Пока он тянется (считанные секунды), краткий контент плавно исчезает, а затем так же плавно появляется полный контент. При повторном нажатии либо активации другого блока предыдущий блок возвращается в исходное положение. 4 див, опять же 'допустим', при нажатии растягивается вверх и влево, тем самым закрывая собой все блоки. Вот, подробно все описал, так как уже изрядно подз***ался. Буду крайне благодарен тому, кто поможет.;) |
В чём именно у Вас возникла проблема?
|
|
проблема в том, что я вообще не знаю, как это реализовать, ибо в яве нуб полный.
По сути нужно один блок заменить другим, большим в размере. |
Итак)
мне удалось сделать замену дива другим с помощью getElementById все появляется в нужном месте и размере, как надо. Теперь мне нужно всего лишь сделать плавное появление второго дива. |
Ray Hamster,
Наверно setInterval и плавное приращение высоты - вплоть до полной, изначально в css для блока ставите высоту 0 После достижения полной высоты -удаляете id тамера, clearInterval(intervalID) , тем самым завершая его работу Про setInterval - тут => http://javascript.ru/setinterval Про изменение высоты элемента => document.getElementById("ID").style.height=XXpx |
Deff, а можно подробнее пожалуйста? И пример, если не трудно)
К тому же, нужно изменять не только высоту, но и ширину, да еще и по разным направлениям. Я использовать getElementById не додумался бы как, если не вытащил бы из примера и не допилил бы под свои нужды :D |
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. |