На этом шаге мы рассмотрим влияние значений свойства position на выполнение эффектов.
При работе с методом .animate() важно помнить об ограничениях, накладываемых таблицами стилей CSS на изменяемые элементы. Например, изменение свойства left не будет оказывать желаемого эффекта на набор элементов, если в таблицах стилей CSS значение свойства position этих элементов не определено как relative или absolute. По умолчанию свойство position CSS всех блочных элементов имеет значение static, что говорит о том, что эти элементы будут оставаться на своих местах, если мы попытаемся переместить их, предварительно не изменив значение свойства position.
Примечание. Дополнительную информацию по абсолютному и относительному позиционированию можно взять здесь.
Взгляните на нашу таблицу стилей, где мы определили, что элемент <div id="switcher"> имеет относительное позиционирование:
#switcher {
position: relative;
width: 300px;
padding: .5em;
border: 1px solid #777;
}
Изменим значение свойства position на static:
#switcher {
position: static;
width: 300px;
padding: .5em;
border: 1px solid #777;
}
Рис.1. Воспроизведение эффекта без перемещения рамки
Полный текст этого примера можно взять здесь.В результате задания такого значения мы наблюдаем только изменение размеров рамки Стиль текста по щелчке на этой метке, что показано в примере рисунка 1.
На следующем шаге мы рассмотрим одновременное и поочередное выполнение эффектов.
