Шаг 62.
Библиотека jQuery. Эффекты. Создание собственных анимационных эффектов. Позиционирование с помощью CSS

    На этом шаге мы рассмотрим влияние значений свойства 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.

    На следующем шаге мы рассмотрим одновременное и поочередное выполнение эффектов.




Предыдущий шаг Содержание Следующий шаг