На этом шаге мы рассмотрим использование метода .animate() для создания более сложных эффектов.
Использование дополнительных свойств позволяет создавать гораздо более сложные эффекты. Например, можно перемещать элемент по странице слева направо и одновременно увеличивать его высоту на 20 пикселей и ширину рамки до 5 пикселей.
Попробуем воспроизвести этот эффект для элемента <div id="switcher">. На рисунке 1 показано, как выглядит страница до воспроизведения эффекта.
Рис.1. Воспроизведение эффекта
Учитывая, что размер окна браузера может изменяться, нам необходимо вычислить расстояние, которое должен преодолеть элемент, прежде чем он достигнет правого края страницы. Предполагая, что параграф имеет ширину 100%, мы можем вычесть ширину блока с меткой Стиль текста из ширины параграфа. Обычно в таких вычислениях используется метод .width() из библиотеки jQuery, но он не учитывает ширину отступов слева и справа и ширину левой границы блока. Однако, начиная с версии jQuery 1.2.6, в нашем распоряжении имеется метод .outerWidth(). Мы будем использовать этот метод, чтобы избежать необходимости добавлять ширину отступа и границы. В данном примере мы будем запускать анимационный эффект щелчком мыши на метке Стиль текста, расположенной над кнопками. Ниже приводится необходимый программный код:
$(document).ready(function() {
$('div.label').click(function() {
var paraWidth = $('div.speech p').outerWidth();
var $switcher = $(this).parent();
var switcherWidth = $switcher.outerWidth();
$switcher.animate({
'left': paraWidth - switcherWidth,
height: '+=20px',
borderWidth: '5px'
}, 'slow');
});
});
Обратите внимание на оператор +=, стоящий перед значением пикселей для свойства height. Такое выражение, впервые появившееся в версии jQuery 1.2, указывает, что мы имеем дело с относительным значением. Следовательно, высота будет увеличиваться не до 20 пикселей, а на 20 пикселей относительно текущего значения.
Данный программный код благополучно увеличивает высоту элемента <div> и расширяет его границы, однако положение левой границы элемента остается неизменным. Нам необходимо разрешить изменение ее положения в таблице стилей CSS.
На следующем шаге мы рассмотрим позиционирование с помощью CSS.
