Думаю, все согласятся, что когда на сайте присутствует анимация, выглядит это сосем иначе, чем резкая смена чего либо. На пример, плавно появляющийся блок или плавное изменение размера контейнера. Анимация создает привлекательные эффекты. По этому, я решил написать немного об этом. Конечно же, анимацию можно делать, используя только стандартные средства JavaScript. Но горазда приятнее и проще делать это, используя фреймворк JQuery. Так что в своих примерах я буду использовать эту библиотеку(или фреймворк, кому как удобнее).

Пример самой простой анимации можно выразить так:

Этот пример демонстрирует плавное "расширение" блока с ID = test. Так же в функции slideDown() можно использовать параметр "скорость"(slow, normal, fast).

Ну, а чтобы вернуть элемент в первоначальное положение, мы используем функцию slideUp() - противоположность slideDown().


Кроме

Sortable - это плагин к JQuery позволяющий сортировать элементы в режиме реального времени, просто перетягивая их мышкой. Данный плагин имеет богатый функционал и я решил сделать подробный ман по его настройке и использованию, так как сам недавно столкнулся с ним и осознал всю его полезность.

Для начала посетим страницу настраиваемой закачки на сайте jQuery UI, чтобы получить необходимые нам файлы. Щелкаем на ссылке Deselect all component, чтобы не закачивать лишнее, а затем выбираем только то, что нам потребуется – отмечаем чекбокс Sortable и видим, что вместе с ним отметились чекбоксы UI Core и Draggable. Работа плагина Sortable зависит от них, поэтому они необходимы.
Кроме этого, справа есть выпадающий список, где можно выбрать понравившуюся тему оформления. Если все готово, кликаем кнопку Download и получаем архив.

Сначала в разделе HEAD подключаем несколько файлов, которые есть в архиве:
[js]
<link type="text/css" href="css/sunny/jq

Выбор элементов по Id либо ClassName аналогично используемому в CSS
Примечание: используйте валидные имена классов и id




Бродим по иерархии объектов в DOM'е

Простой выбор потомков:

Аналогичный результат так же можно получить используя следующую конструкцию:

Выбор только непосредственных потомков

Как же лучше поступить, что ра

И так, по просьбам некоторых пользователей, я наконец, дошел до написания этого мануала по AJAX. Мануалом это назвать вряд ли можно будет, но за то вы поймете как совершать асинхронные запросы при помощи технологии AJAX и как оживить свои странички и добавить им интерактивности. И самое приятное в этом то, что это почти ничего не стоит. Всего пара строк кода)

Для начала, разберемся что такое AJAX?

AJAX - это технология, позволяющая совершать асинхронные запросы к базе данных, например MySQL. То есть вы можете получить данные без перезагрузки страницы. А так же отобразить загрузки статусбаром(вращающейся картинкой или чем то подобным).

Как воспользоваться прелестями AJAX если я ничего об этом не знаю?

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

Думаю я буду прав, если скажу, что AJAX - это камень преткновения многих программистов. Например, у меня с ним знакомство пошло как то туго и у многих моих коллег тоже. Но это по тому что я редко им занимался, да и желанием вникнуть в него на 100% никогда не горел. А на самом деле в AJAX и асинхронных запросах к базе данных нет ничего сложного. Особенно если использовать библиотеки вроде JQuery или Prototype. В своих примерах я буду использовать JQuery. Так, что советую сразу скачать эту библиотеку или как ее еще называют - фреймворк.

В этой статье я расскажу как сделать асинхронный запрос к базе. Это позволяет получать или обрабатывать информацию без перезагрузки всей страницы. Мы можем обновить содержимое так как нам это надо. Например, только содержимое одного divа. Поехали..
Создаем два файла. Один это наша страница, а ко второму мы будем обращаться через методы JQuery.

файл index.html - страница

Немного раскажу о том как отжеч плавно появляющиеся объекты на JavaScript. В жабаскрипте есть пара функций для поочередного вызова других функций через какой-то промежутовремени. Как бы в цикле. Эти функции setTimeLimit() и setTimeоut().

вот пример функции. Сейчас я объясню что сдесь к чему. И как она анимирует элементы.

[js]
//стартовые значения задержки между периодами и количеством периодов
var wRight = 0;
var wLeft = 0;
var wStep = 10;
var winTimeout = 50;
//var wObj = document.getElementById('test');
//тут перебираем нужный элемент и меняем ему постепено значение прозрачности
function wiOpen(pref) {
prefix = pref;
var wObj = document.getElementById(pref + '_dWin');
wObj.style.display = 'block';
if (wStep > 9) {
if (pref == 'sec') document.getElementById('cat_dWin').style.display = 'none';
else document.getElementById('sec_dWin').style.display = 'none';
}
if (wStep > 0) {
wStep--;
wLeft += 0.1;

wObj.style.opacity = wLeft;