Всем привет, господа хорошие. Созрел вопрос по анимированию одельных ячеек таблицы. Всего их 4. Моя задача - заставить их появиться через заданный интервал времени после загрузки страницы. Вот код странички с одним основным элементом - таблицей 2х2. белые ячейки нужно заставить плавно появиться через 1-2 секунды после загрузки страницы. Та ячейка, что слева внизу, должна появиться снизу (меняя прозрачность с 90% до 5%). Такой же эффект (одновременно) и ячейка, расположенная справа вверху. На первой секунде на экране будет только синий (#203A66) цвет, экран будет разбит на 4 визуальных блока, разделенных границами ячеек. после анимации логотипа (он будет делать оборот в 360 градусов сразу с первой доли секунды загрузки страницы) в центре, начнут появляться ячейки 2 и 3 (описано выше). Как это реализовать, какие способы лучше использовать? Стоит ли делать позиционирование отдельных блоков на странице или можно работать с ячейками? Прочитано много материала, так что в голове каша. Нужно полностью готовое решение, не просто ссылка на учебник по Jqwery или css. Вот, собственно, код: HTML: [ ** Только зарегистрированные пользователи могут смотреть Код ** ]
1. Добавляем в код любой js фрейморк с эфектами анимации, как вариант - jquery. В head вставляем скрипт подключения этой библиотеки: Код: [ ** Только зарегистрированные пользователи могут смотреть Код ** ] 2. Добавляем кодировку, а то тестовый пример некорректно отображается в браузере: 3. Ищем справочник по эффектам Jquery. 4. Добавляем крипт с инициализацией эффекта для определенного id элемента. Например, используя этот мануал - http://jqbook.net.ru/jquery/Effects
Вот готовый, работающий пример. В котором анимация проявления ячейки #box1 Перед этим в стилях устанавливаем атрибут скрытия этого элемента: #box1 { display: none; } Скрипт инициализации запуска анимации: Код: [ ** Только зарегистрированные пользователи могут смотреть Код ** ] Рабочий пример: Код: [ ** Только зарегистрированные пользователи могут смотреть Код ** ]
Варьируя параметр show изменяем время выполнения анимации. В этом примере проявление ячейки занимает 4 сек: <script> $("#box1").show(4000); </script> Код: [ ** Только зарегистрированные пользователи могут смотреть Код ** ]
Надо верстать на дивах, а не в таблице, что бы можно было сделать анимацию блока снизу вверх. Ячейку перемещать вряд ли получится. Предварительно надо будет в стилях для этого блока сместить его вниз и скрыть, к примеру. А потом, анимацией выводить в нужное место.