Всем привет, господа хорошие. Созрел вопрос по анимированию одельных ячеек таблицы. Всего их 4. Моя задача - заставить их появиться через заданный интервал времени после загрузки страницы. Вот код странички с одним основным элементом - таблицей 2х2. белые ячейки нужно заставить плавно появиться через 1-2 секунды после загрузки страницы. Та ячейка, что слева внизу, должна появиться снизу (меняя прозрачность с 90% до 5%). Такой же эффект (одновременно) и ячейка, расположенная справа вверху. На первой секунде на экране будет только синий (#203A66) цвет, экран будет разбит на 4 визуальных блока, разделенных границами ячеек. после анимации логотипа (он будет делать оборот в 360 градусов сразу с первой доли секунды загрузки страницы) в центре, начнут появляться ячейки 2 и 3 (описано выше). Как это реализовать, какие способы лучше использовать? Стоит ли делать позиционирование отдельных блоков на странице или можно работать с ячейками? Прочитано много материала, так что в голове каша. Нужно полностью готовое решение, не просто ссылка на учебник по Jqwery или css. Вот, собственно, код: HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html style="height: 100%" xmlns="http://www.w3.org/1999/xhtml"> <head> <link type="text/css" rel="stylesheet" href="css/style.css" /> <style type="text/css"> table, td, th { border:3px solid #203A66; } th { background-color:#203A66; color:white; } </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ќтступы</title> </head> <body style="height: 100% background:#203A66"> <table bordercolor="#203A66" style='position: absolute; top: 0px; left:0px; width:100%; height:100%' border=0px; > <tr height=50% ;><td id='box1' style="background:#203A66" width=50%></td><td id='right_top' width=50%></td></tr> <tr height=50%><td id='left_bottom' width=50%></td><td id='box2' width=50% style="background:#203A66"></td></tr> </table> </body> </html>
1. Добавляем в код любой js фрейморк с эфектами анимации, как вариант - jquery. В head вставляем скрипт подключения этой библиотеки: Код: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 2. Добавляем кодировку, а то тестовый пример некорректно отображается в браузере: 3. Ищем справочник по эффектам Jquery. 4. Добавляем крипт с инициализацией эффекта для определенного id элемента. Например, используя этот мануал - http://jqbook.net.ru/jquery/Effects
Вот готовый, работающий пример. В котором анимация проявления ячейки #box1 Перед этим в стилях устанавливаем атрибут скрытия этого элемента: #box1 { display: none; } Скрипт инициализации запуска анимации: Код: <script> $("#box1").show("slow"); </script> Рабочий пример: Код: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html style="height: 100%" xmlns="http://www.w3.org/1999/xhtml"> <head> <link type="text/css" rel="stylesheet" href="css/style.css" /> <style type="text/css"> table, td, th { border:3px solid #203A66; } th { background-color:#203A66; color:white; } #box1 { display: none; } </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ќтступы</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body style="height: 100% background:#203A66"> <table bordercolor="#203A66" style='position: absolute; top: 0px; left:0px; width:100%; height:100%' border=0px; > <tr height=50% ;><td id='box1' style="background:#203A66" width=50%></td><td id='right_top' width=50%></td></tr> <tr height=50%><td id='left_bottom' width=50%></td><td id='box2' width=50% style="background:#203A66"></td></tr> </table> <script> $("#box1").show("slow"); </script> </body> </html>
Варьируя параметр show изменяем время выполнения анимации. В этом примере проявление ячейки занимает 4 сек: <script> $("#box1").show(4000); </script> Код: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html style="height: 100%" xmlns="http://www.w3.org/1999/xhtml"> <head> <link type="text/css" rel="stylesheet" href="css/style.css" /> <style type="text/css"> table, td, th { border:3px solid #203A66; } th { background-color:#203A66; color:white; } #box1 { display: none; } </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ќтступы</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body style="height: 100% background:#203A66"> <table bordercolor="#203A66" style='position: absolute; top: 0px; left:0px; width:100%; height:100%' border=0px; > <tr height=50% ;><td id='box1' style="background:#203A66" width=50%></td><td id='right_top' width=50%></td></tr> <tr height=50%><td id='left_bottom' width=50%></td><td id='box2' width=50% style="background:#203A66"></td></tr> </table> <script> $("#box1").show(4000); </script> </body> </html>
Надо верстать на дивах, а не в таблице, что бы можно было сделать анимацию блока снизу вверх. Ячейку перемещать вряд ли получится. Предварительно надо будет в стилях для этого блока сместить его вниз и скрыть, к примеру. А потом, анимацией выводить в нужное место.