Перед этой статьей было написано несколько примеров работы ajax. Во всех контент появлялся просто, без всяких украшательств. Но ведь красивее и удобнее, если контент появляется каким-то особым образом. Давайте посмотрим, как это можно сделать.
Например, на
сайте моей студии web-дизайна используется следующий способ:
$("#content").animate({ opacity: 'hide' }, "slow");
Таким образом мы плавно меняем прозрачность элемента с id="content", у меня это был div. Мы просто плавно меняются css свойства, указанные в параметрах. Можно менять и размеры объекта и отступы, и прочие свойства css.
Достаточно простой функцией является show(), например:
$("#content").show();
Функция просто показывает контент, скрытый с использованием hide() или в css display: none. Если использовать функцию без параметров, то анимация отсутствует. Но можно передать функции скорость, например slow или fast. И еще противоположная:
$("#content").hide();
Интересной функцией является slideDown(). Она как бы развертывает снизу вверх выбранный объект:
$("#content").slideDown("slow");
Аналогичная функция slideUp() скрывает объект, путем свертывания снизу вверх:
$("#content").slideUp("slow");
Функция slideToggle() скрывает или показывает выбранные элементы путем свертывания или развертывания:
$("#content").slideToggle("slow");
А вот еще одна полезная вещь - fadeTo (). Она меняет прозрачность за заданный интервал времени до указанной величины.
$("#content").fadeTo("slow", 0.25);
Также есть функция, вовсе удаляющая объект со страницы, это функция remove():
$("#content").remove();
Для создания более сложной анимации используется функция animate(). Ее применение Вы можете увидеть
в статье знакомства. Именно с нее я когда-то начал свое освоение jQuery. Стоит отметить такое важное свойство функции как queue. Если этот параметр принимает значение true, то следующая анимация будет выполняться после завершения текущей. Если значение false, то онимации будут происходить параллельно.
Если Вам вдруг надо остановить выполнение какой-то анимации, используйте функцию stop():
$("#content").stop();
Ну вот, основные анимационные функции jQuery кончились. Но мне кажется, что и с ними можно сотворить отличную страничку.
