Содержание
Значения параметров
Параметр | Описание |
---|---|
duration | Строковое или числовое значение, которое определяет, как долго анимация будет продолжаться. Значение по умолчанию 400 (в миллисекундах). Строковые ключевые слова ‘fast’ и ‘slow’ соответствуют 200 и 600 миллисекундам соответственно (высокие значения указывают на медленную анимацию, а более низкие на быструю). |
easing | Ключевое слово (строка), которое опряеделяет кривую скорости для анимации (используется математическая функция — кубическая кривая Безье). Без использования внешних плагинов имеет только два значения — linear (эффект анимации с одинаковой скоростью от начала до конца) и swing (эффект анимации имеет медленный старт и медленное окончание, но скорость увеличивается в середине анимации). Значение по умолчанию swing. |
complete | Функция, которая будет выполнена после завершения анимации, она вызывается один раз для каждого соответствующего элемента. Внутри функции, переменная this ссылается на DOM элемент к которому применяется анимация. |
options |
|
Значения параметров
Параметр | Описание |
---|---|
classname | Добавляет или удаляет один или несколько классов каждому выбранному элементу. Необязательный параметр (допускается использовать пустое значение). |
function | Задает функцию, которая возвращает одно или несколько имен классов, которые необходимо добавить, либо удалить.
|
state | Логическое значение, которое указывает, что класс / классы должны быть только добавлены (значение true), или класс / классы должны быть только удалены (значение false). Необязательный параметр
$( selector ).toggleClass( classname, x % 2 === 0 ) // класс будет добавлен, когда условие будет true. |
8 ответов
30 Лучший ответ
Вы можете сделать что-то вроде этого:
Пример — Слайд и Fade:
Этот слайд и анимирует непрозрачность — не на основе высоты контейнера, а сверху/координаты. Показать пример
Пример — Auto-height/No Javascript: Вот живой образец, не требующий высоты — работа с автоматической высотой и без javascript. Показать пример
22 фев. 2011, в 01:13 Поделиться 14
Я изменил ваше решение, чтобы он работал во всех современных браузерах:
фрагмент css:
js snippet:
здесь полный пример http://jsfiddle.net/RHPQd/
12 фев. 2013, в 17:38 Поделиться 9
Итак, я пошел дальше и ответил на свой вопрос:)
@True ответ рассматривается как преобразование элемента в определенную высоту. Проблема в том, что я не знаю высоту элемента (он может колебаться).
Я нашел другие решения, вокруг которых использовалась максимальная высота в качестве перехода, но это создало для меня очень резкую анимацию.
Здесь он (работает только в браузерах WebKit): http://jsfiddle.net/XUjAH/6/
Хотя это не чисто CSS, мое решение включает в себя переход высоты, которая определяется некоторыми JS.
22 фев. 2011, в 02:45 Поделиться 7
почему бы не воспользоваться преимуществами современных браузеров css перехода и сделать вещи проще и быстрее, используя больше css и меньше jquery
Аналогичным образом мы можем изменить скольжение сверху вниз или справа налево, изменив значение origin и transform: scaleX (0) или transform: scaleY (0) соответственно.
12 апр. 2014, в 11:24 Поделиться 6
Я бы рекомендовал использовать jQuery Transit Plugin, который использует свойство преобразования CSS3, которое отлично работает на мобильных устройствах из-за того, что большинство вспомогательных аппаратных ускорений внешний вид и внешний вид.
HTML:
JavaScript:
11 март 2013, в 18:01 Поделиться 3
Получение переходов на высоту для работы может быть немного сложнее, потому что вам нужно знать высоту для анимации. Это дополнительно осложняется добавлением в анимированный элемент.
Вот что я придумал:
используйте такой стиль:
Оберните свой контент в другой контейнер, чтобы скользящий контейнер не имел полей/полей/границ:
Затем используйте несколько script (или декларативную разметку в инфраструктуре привязки) для запуска классов CSS.
Пример здесь: http://plnkr.co/edit/uhChl94nLhrWCYVhRBUF?p=preview
Это отлично подходит для контента с фиксированным размером. Для более общего разрешения вы можете использовать код для определения размера элемента при активации перехода. Ниже приведен плагин jQuery, который делает именно это:
который может быть вызван следующим образом:
$( «# Триггер» ). click (function() {
против разметки следующим образом:
Пример: http://plnkr.co/edit/Wpcgjs3FS4ryrhQUAOcU?p=preview
Я написал это недавно в блоге, если вас интересует более подробная информация:
24 фев. 2014, в 21:40 Поделиться 2
Aight fam, после некоторых исследований и экспериментов, я считаю, что лучший подход заключается в том, чтобы высота предмета была и позволила ему перейти на точную высоту. Вы получаете точную высоту с помощью JavaScript. JavaScript не выполняет анимацию, а просто меняет значение высоты. Проверьте это:
Всякий раз, когда страница загружается или изменяется, элемент с классом будет обновлен атрибут . Затем вы можете нажать кнопку , чтобы установить ее на ранее установленное значение .
Здесь стиль для класса .
Я использовал это в одном из моих проектов, поэтому имена классов специфичны. Вы можете изменить их, как хотите.
Стиль может не поддерживаться кросс-браузером. Прекрасно работает в хроме.
Ниже приведен живой пример этого кода. Просто нажмите значок , чтобы начать анимацию
CodePen
01 июль 2016, в 18:21 Поделиться
вы не можете сделать easisly слайд-шоу slidedown с css3 tha, почему я превратил JensT script в плагин с резервным копированием javascript и обратным вызовом.
таким образом, если у вас есть современный brwowser, вы можете использовать css3 csstransition. если ваш браузер не поддерживает его, воспользуйтесь старинным слайд-шоу SlideUp.
плагин
как использовать его
вы можете найти демо-страницу здесь http://www.mosne.it/playground/mosne_slide_up_down/
04 окт. 2013, в 12:57 Поделиться
Ещё вопросы
- 2068Как получить дочерние элементы селектора $ (this)?
- 1264Создание элемента div в jQuery
- 966Проверьте, установлен ли флажок с помощью jQuery
- 741HTML-кодировка теряется при чтении атрибута из поля ввода
- 778Установить опцию select «selected» по значению
- 529Как создать анимацию «Пожалуйста, подождите, идет загрузка…» с помощью jQuery?
- 118Bootstrap 3 и Youtube в модале
- 110Деревья в Твиттере Bootstrap
- 91Как создать адаптивное изображение, которое также масштабируется в Bootstrap 3
- 24Как построить плавающую строку меню при прокрутке вниз
Присоединяемые события
Метод | Описание |
---|---|
$.proxy() | Принимает функцию и возвращает новую, которая всегда будет иметь определенный контекст выполнения. |
.off() | Позволяет удалить обработчик, или обработчики событий, присоединенные методом .on(). |
.on() | Приcоединяет для выбранных элементов функцию обработчика для одного или нескольких событий. |
.one() | Приcоединяет для выбранных элементов функцию обработчика, которая будет выполнена не более одного раза к каждому элементу по каждому типу событий. |
.trigger() | Позволяет выполнить все функции обработчики событий, присоединенные у выбранного элемента для данного типа события. |
.triggerHandler() | Позволяет вызвать все функции обработчики событий, присоединенные у выбранного элемента по указанному типу событий без вызова самого события. |
Значения параметров
Параметр | Описание |
---|---|
duration | Строковое или числовое значение, которое определяет, как долго анимация будет продолжаться. Значение по умолчанию 400 (в миллисекундах). Строковые ключевые слова ‘fast’ и ‘slow’ соответствуют 200 и 600 миллисекундам соответственно (высокие значения указывают на медленную анимацию, а более низкие на быструю). |
easing | Ключевое слово (строка), которое опряеделяет кривую скорости для анимации (используется математическая функция — кубическая кривая Безье). Без использования внешних плагинов имеет только два значения — linear (эффект анимации с одинаковой скоростью от начала до конца) и swing (эффект анимации имеет медленный старт и медленное окончание, но скорость увеличивается в середине анимации). Значение по умолчанию swing. |
complete | Функция, которая будет выполнена после завершения анимации, она вызывается один раз для каждого соответствующего элемента. Внутри функции, переменная this ссылается на DOM элемент к которому применяется анимация. |
options |
|
Значения параметров
Параметр | Описание |
---|---|
duration | Строковое или числовое значение, которое определяет, как долго анимация будет продолжаться. Значение по умолчанию 400 (в миллисекундах). Строковые ключевые слова ‘fast’ и ‘slow’ соответствуют 200 и 600 миллисекундам соответственно (высокие значения указывают на медленную анимацию, а более низкие на быструю). |
easing | Ключевое слово (строка), которое опряеделяет кривую скорости для анимации (используется математическая функция — кубическая кривая Безье). Без использования внешних плагинов имеет только два значения — linear (эффект анимации с одинаковой скоростью от начала до конца) и swing (эффект анимации имеет медленный старт и медленное окончание, но скорость увеличивается в середине анимации). Значение по умолчанию swing. |
complete | Функция, которая будет выполнена после завершения анимации, она вызывается один раз для каждого соответствующего элемента. Внутри функции, переменная this ссылается на DOM элемент к которому применяется анимация. |
options |
|
Определение и применение
jQuery метод .slideToggle() позволяет плавно отобразить или скрыть выбранные элементы скользящим движением. Если элемент изначально отображается, то он будет скрыт, если элемент скрыт, то он будет отображен.
Значение CSS свойства display элемента сохраняются и восстанавливаются при необходимости. Например, если элемент имеет значение этого свойства inline, то при отображении элемента, после того как он был скрыт, значение свойства не изменится и будет по прежнему inline.
Обращаю Ваше внимание, что метод .slideToggle() производит анимацию только высоты элемента (height), а метод .toggle(), используемый с параметрами анимирует свойства width (ширина), height (высота) и opacity (прозрачность). Метод .toggle() используемый без параметров в отличии от метода .slideToggle() не производит никакой анимации
properties
- duration — movement duration in milli seconds
- easeCollapse — function which generates a value between
- easeExpand — function which generates a value between
- collapsed — start in collapsed mode
- irreversible — you can’t reverse direction during movement
- noDisplayStyle — skip adding display:none on collapsed
- noOverflowHidden — skip adding overflow:hidden on the collapsible element
- bestPerformance — don’t apply setState for every frame update. Disables range and progress update
- whenReversedUseBackwardEase — play backwards on reverse toggling
- interpolateOnReverse — avoid jumpy height changes when easeCollapse and easeExpand gives far different height position on reverse toggling.
- onExpanded — event hook
- onExpanding — event hook
- onCollapsed — event hook
- onCollapsing — event hook
- onMount — event hook
- onUnmount — event hook
- render — render callback
- children — render callback
- offsetHeight — use offsetHeight HTML element calculation
- expandEvent — update value to to invoke a controlled expand
- collapseEvent — update value to to invoke a controlled collapse
- toggleEvent — update value to to invoke a controlled toggle
С этим читают