Пользовательские эффекты
119Веб-программирование --- jQuery --- Пользовательские эффекты
»» В данной статье используется исходный код для примеров. Сохраните эту страницу для тестирования приведенных ниже примеров.
Библиотека jQuery не ограничивает вас созданием лишь базовых эффектов анимации высоты и непрозрачности элементов. Можно создавать также собственные эффекты. Пригодные для этого методы перечислены в таблице ниже:
Метод | Описание |
---|---|
animate(свойства), animate(свойства, продолжительность), animate(свойства, продолжительность, функция), animate(свойства, продолжительность, стиль, функция) |
Выполняют анимацию за счет плавного изменения значений CSS-свойств с возможностью указания длительности и стиля анимации, а также функции обратного вызова |
animate(свойства, продолжительность, параметры) | Выполняет анимацию за счет плавного изменения значений CSS-свойств, которые, как и дополнительные параметры, передаются методу в виде объекта с возможностью передачи объекта, содержащего дополнительные параметры, в качестве аргумента |
Библиотека jQuery позволяет выполнить анимацию любого свойства, принимающего простые числовые значения, например свойства height.
В качестве аргументов метод animate() принимает объект отображения, содержащий набор свойств в виде пар "имя-значение", анимацию которых требуется выполнить, и дополнительные параметры. Пример пользовательской анимации приведен ниже:
$(function() {
$('form').css({"position": "fixed", "top": "70px", "z-index": "2"});
$('h1').css({"position": "fixed", "z-index": "1", "min-width": "0"});
$("<button>Анимировать</button>").insertAfter("#buttonDiv button")
.click(function(e) {
$('h1').animate({
height: $('h1').height() + $('form').height() + 10,
width: ($('form').width())
});
e.preventDefault();
});
});
Запустить пример
В этом сценарии мы намереваемся анимировать размеры элемента h1 таким образом, чтобы его фоновое изображение выходило за пределы элемента form. Прежде чем это можно будет сделать, необходимо внести некоторые изменения в свойства элементов, затрагиваемые анимацией. Это можно было бы сделать, внеся соответствующие изменения в таблицу стилей. Однако, мы используем для этой цели средства JavaScript.
Чтобы упростить управление анимацией, мы позиционируем элементы form и h1 в режиме fixed и обеспечиваем отображение элемента form поверх элемента h1 путем установки соответствующих значений свойства z-index для этих элементов.
В документ добавлена кнопка, щелчок на которой приводит к вызову элемента animate(). Анимируются свойства height и width, информация о которых получается с помощью методов jQuery.
Использование абсолютных целевых значений свойств
Обратите внимание на то, что в процессе создания анимации мы указываем лишь конечные значения свойств. В jQuery при создании пользовательской анимации в качестве отправной точки используются текущие значения анимируемых свойств. В последнем сценарии используются значения свойств, извлеченные с помощью соответствующих методов jQuery, однако для этого существуют и другие возможности. Первая и наиболее очевидная из них — это использование абсолютных значений свойств, как показано в примере ниже:
...
$('h1').animate({
left: 50,
height: $('h1').height() + $('form').height() + 10,
width: ($('form').width())
});
...
В этом примере мы добавили в анимацию свойство left, указав для него абсолютное значение 50 (что будет воспринято jQuery как 50 пикселей). В результате этого элемент h1 сместится вправо.
Использование относительных целевых значений свойств
При задании целевых значений анимируемых свойств допускается использовать относительные значения. Увеличение значения указывается префиксом +=, уменьшение префиксом -=. Пример использования относительных значений приведен ниже:
...
$('h1').animate({
height: "+=100",
width: "-=70"
});
...
Запустить пример