Пользовательские эффекты

119

»» В данной статье используется исходный код для примеров. Сохраните эту страницу для тестирования приведенных ниже примеров.

Библиотека 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"
    });
...

Запустить пример
Пройди тесты
Лучший чат для C# программистов