Определение и применение
jQuery метод .fadeIn() позволяет плавно изменить прозрачность для отдельных элементов (из скрытого состояния в видимое). Другими словами, метод производит анимацию изменения прозрачности выбранных элементов плавно переводя их из скрытого состояния в видимое.
Обращаю Ваше внимание, что для того, чтобы перевести элемент из видимого состояния в скрытое, изменяя при этом прозрачность элемента, вы можете воспользоваться jQuery методом .fadeOut().
jQuery синтаксис:
Добавлен в версии jQuery
Значения параметров
| Параметр | Описание |
|---|---|
| duration | Строковое или числовое значение, которое определяет, как долго анимация будет продолжаться. Значение по умолчанию 400 (в миллисекундах). Строковые ключевые слова ‘fast’ и ‘slow’ соответствуют 200 и 600 миллисекундам соответственно (высокие значения указывают на медленную анимацию, а более низкие на быструю). |
| easing | Ключевое слово (строка), которое опряеделяет кривую скорости для анимации (используется математическая функция — кубическая кривая Безье). Без использования внешних плагинов имеет только два значения — linear (эффект анимации с одинаковой скоростью от начала до конца) и swing (эффект анимации имеет медленный старт и медленное окончание, но скорость увеличивается в середине анимации). Значение по умолчанию swing. |
| complete | Функция, которая будет выполнена после завершения анимации, она вызывается один раз для каждого соответствующего элемента. Внутри функции, переменная this ссылается на DOM элемент к которому применяется анимация. |
| options |
|
Пример использования
В этом примере с использованием jQuery метода .fadeIn() мы при нажатии на определенную кнопку, плавно изменяя прозрачность отображаем все элементы
Результат нашего примера:
Пример использования jQuery методов .fadeOut() и .fadeIn() (без параметров)
Рассмотрим следующий пример в котором зададим методам .fadeIn() и .fadeOut() различные значения продолжительности анимации:
В этом примере с использованием jQuery методов .fadeIn() и .fadeOut() мы при нажатии на определенную кнопку плавно изменяя прозрачность скрываем, либо отображаем все элементы
Результат нашего примера:
Пример использования jQuery методов .fadeOut() и .fadeIn() (различная скорость анимации).
Рассмотрим следующий пример в котором зададим методам .fadeIn() и .fadeOut() не только продолжительность анимации, но и укажем скорость анимации и функцию, которая будет выполнена после завершения анимации:
В этом примере с использованием jQuery методов .fadeIn() и .fadeOut() мы при нажатии на определенную кнопку плавно изменяя прозрачность скрываем, либо отображаем все элементы
Результат нашего примера:
Пример использования jQuery методов .fadeOut() и .fadeIn() (с callback функцией).
Рассмотрим следующий пример в котором передадим в качестве параметра методов .fadeIn() и .fadeOut() объект, содержащий различные опции, которые будут контролировать анимацию:
В этом примере с использованием jQuery методов .fadeIn() и .fadeOut() мы при нажатии на определенную кнопку плавно изменяя прозрачность скрываем, либо отображаем все элементы
- продолжительность анимации равную 800 миллисекунд (duration: 800)
- эффект анимации происходит с одинаковой скоростью от начала до конца (easing: linear)
- функция, которая после завершения анимации находит элемент с классом status и добавляет текстовую информацию (complete: function).
- анимация не размещается в очереди эффектов (queue: false).
Результат нашего примера:
Пример использования jQuery методов .fadeOut() и .fadeIn() (объект с опциями в качестве параметра). jQuery эффекты
Я пытаюсь затухать от 0.5 opacity до 1.0 opacity. Но это не сработает.
Но угасание от 0,5 непрозрачности до 0 работ:
Это очень похоже на ошибку. что-то связано с тем, что вы пытаетесь fadeIn элемента, который уже виден — fadeIn считает, что элемент с непрозрачностью 0,5 должен быть видимым, потому что он проверяет свойство display (в данном случае это block , а не none ) не для opacity . Если
fadeOut также проверяет свойство display . Как не является none , fadeOut считает, что этот элемент является видимым (это не имеет значения, что непрозрачности этот элемент имеет). Таким образом, fadeOut работает в этом случае.
Чтобы добиться желаемого эффекта, попробуйте вместо этого использовать fadeTo :
JQuery fadeIn() и fadeOut() не изменяют непрозрачность с числовыми значениями. Вместо этого используются ключевые слова анимации:
Он использует ключевые слова show и hide в методе animate() , который проверяет состояние элемента перед применением эффекта. Поскольку ваш элемент уже виден, анимация шоу не будет иметь эффекта.
Однако при использовании fadeOut() ключевое слово hide будет иметь эффект, поскольку элемент еще не скрыт.
Слева у меня на блоге вы можете увидеть кнопку с меняющейся надписью. Отвечает за смену её функция jQuery html():
То есть мы вставляем любой произвольный html код в элемент, в данном случае в класс vertext. А что, если мы захотим сделать плавное изменение этого текста? Опять же, как у меня на блоге? Логика подсказывает задействовать функцию анимации fadeIn(‘slow’), то есть вот так:
Однако, этот вариант не работает. Почему? Сначала надо скрыть элемент — использовать функцию hide(). То есть окончательный вариант будет таков:
Именно так можно заставить работать fadeIn() вместе с html() или text().
заметки, jQuery, javascript, функции, хитрости