Jquery effects — sliding

Значения параметров

Параметр Описание
duration Строковое или числовое значение, которое определяет, как долго анимация будет продолжаться. Значение по умолчанию 400 (в миллисекундах). Строковые ключевые слова ‘fast’ и ‘slow’ соответствуют 200 и 600 миллисекундам соответственно (высокие значения указывают на медленную анимацию, а более низкие на быструю).
easing Ключевое слово (строка), которое опряеделяет кривую скорости для анимации (используется математическая функция — кубическая кривая Безье). Без использования внешних плагинов имеет только два значения — linear (эффект анимации с одинаковой скоростью от начала до конца) и swing (эффект анимации имеет медленный старт и медленное окончание, но скорость увеличивается в середине анимации). Значение по умолчанию swing.
complete Функция, которая будет выполнена после завершения анимации, она вызывается один раз для каждого соответствующего элемента. Внутри функции, переменная this ссылается на DOM элемент к которому применяется анимация.
options
  • duration (по умолчанию: 400). Тип: Number, или String. Строковое или числовое значение, которое определяет, как долго анимация будет продолжаться (смотри выше).
  • easing (по умолчанию: swing). Тип: String. Ключевое слово (строка), которое определяет кривую скорости для анимации (смотри выше).
  • queue (по умолчанию: true). Тип: Boolean, или String. Логическое значение, которое указывает следует ли размещать анимацию в очереди эффектов. Если указано false, то анимация начнется сразу же. С версии jQuery 1.7 опция queue также может принимать строку, в этом случае анимация будет добавлена к очереди, представленной этой строкой. Когда используется пользовательское имя очереди анимации, то она не запускается автоматически, вы должны при этом использовать метод .dequeue( «имя очереди» ), чтобы запустить её.
  • specialEasing. Тип: PlainObject. Объект, содержащий одно или несколько свойств CSS, определенных параметром свойства и соответствующие им функции замедления. Добавлено в версии 1.4.
  • step. Тип: Function( Number now, Tween tween ). Функция вызывается для каждого анимируемого свойства каждого анимированного элемента. Эта функция дает возможность изменять Tween Object, чтобы изменить значение свойства, прежде чем оно будет установлено.
  • progress. Тип: Function. Функция, которая будет вызываться после каждого шага анимации, только один раз для каждого анимированного элемента, независимо от количества анимированных свойств. Добавлено в версии 1.8.
  • complete. Тип: Function. Функция (callback), которая будет выполнена после завершения анимации, она вызывается один раз для каждого соответствующего элемента (смотри выше).
  • start. Тип: Function (Promise Object animation). Функция, вызывается, когда анимация элемента начинается. Добавлено в версии 1.8.
  • done. Тип: Function (Promise Object animation, Boolean jumpedToEnd). Функция вызывается, когда анимация элемента завершается. Добавлено в версии 1.8.
  • fail. Тип: Function (Promise Object animation, Boolean jumpedToEnd). Функция вызывается, когда анимацию элемента не удается завершить. Добавлено в версии 1.8.
  • always. Тип: Function (Promise Object animation, Boolean jumpedToEnd). Функция вызывается, когда анимация элемента завершается или останавливается незавершенной. Добавлено в версии 1.8.

Значения параметров

Параметр Описание
classname Добавляет или удаляет один или несколько классов каждому выбранному элементу. Необязательный параметр (допускается использовать пустое значение).
function Задает функцию, которая возвращает одно или несколько имен классов, которые необходимо добавить, либо удалить.
  • index — возвращает индекс позиции элемента в наборе (среди выбранных элементов).
  • classname — возвращает текущее имя класса выбранного элемента.
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). Тип: Number, или String. Строковое или числовое значение, которое определяет, как долго анимация будет продолжаться (смотри выше).
  • easing (по умолчанию: swing). Тип: String. Ключевое слово (строка), которое определяет кривую скорости для анимации (смотри выше).
  • queue (по умолчанию: true). Тип: Boolean, или String. Логическое значение, которое указывает следует ли размещать анимацию в очереди эффектов. Если указано false, то анимация начнется сразу же. С версии jQuery 1.7 опция queue также может принимать строку, в этом случае анимация будет добавлена к очереди, представленной этой строкой. Когда используется пользовательское имя очереди анимации, то она не запускается автоматически, вы должны при этом использовать метод .dequeue( «имя очереди» ), чтобы запустить её.
  • specialEasing. Тип: PlainObject. Объект, содержащий одно или несколько свойств CSS, определенных параметром свойства и соответствующие им функции замедления. Добавлено в версии 1.4.
  • step. Тип: Function( Number now, Tween tween ). Функция вызывается для каждого анимируемого свойства каждого анимированного элемента. Эта функция дает возможность изменять Tween Object, чтобы изменить значение свойства, прежде чем оно будет установлено.
  • progress. Тип: Function. Функция, которая будет вызываться после каждого шага анимации, только один раз для каждого анимированного элемента, независимо от количества анимированных свойств. Добавлено в версии 1.8.
  • complete. Тип: Function. Функция (callback), которая будет выполнена после завершения анимации, она вызывается один раз для каждого соответствующего элемента (смотри выше).
  • start. Тип: Function (Promise Object animation). Функция, вызывается, когда анимация элемента начинается. Добавлено в версии 1.8.
  • done. Тип: Function (Promise Object animation, Boolean jumpedToEnd). Функция вызывается, когда анимация элемента завершается. Добавлено в версии 1.8.
  • fail. Тип: Function (Promise Object animation, Boolean jumpedToEnd). Функция вызывается, когда анимацию элемента не удается завершить. Добавлено в версии 1.8.
  • always. Тип: Function (Promise Object animation, Boolean jumpedToEnd). Функция вызывается, когда анимация элемента завершается или останавливается незавершенной. Добавлено в версии 1.8.

Значения параметров

Параметр Описание
duration Строковое или числовое значение, которое определяет, как долго анимация будет продолжаться. Значение по умолчанию 400 (в миллисекундах). Строковые ключевые слова ‘fast’ и ‘slow’ соответствуют 200 и 600 миллисекундам соответственно (высокие значения указывают на медленную анимацию, а более низкие на быструю).
easing Ключевое слово (строка), которое опряеделяет кривую скорости для анимации (используется математическая функция — кубическая кривая Безье). Без использования внешних плагинов имеет только два значения — linear (эффект анимации с одинаковой скоростью от начала до конца) и swing (эффект анимации имеет медленный старт и медленное окончание, но скорость увеличивается в середине анимации). Значение по умолчанию swing.
complete Функция, которая будет выполнена после завершения анимации, она вызывается один раз для каждого соответствующего элемента. Внутри функции, переменная this ссылается на DOM элемент к которому применяется анимация.
options
  • duration (по умолчанию: 400). Тип: Number, или String. Строковое или числовое значение, которое определяет, как долго анимация будет продолжаться (смотри выше).
  • easing (по умолчанию: swing). Тип: String. Ключевое слово (строка), которое определяет кривую скорости для анимации (смотри выше).
  • queue (по умолчанию: true). Тип: Boolean, или String. Логическое значение, которое указывает следует ли размещать анимацию в очереди эффектов. Если указано false, то анимация начнется сразу же. С версии jQuery 1.7 опция queue также может принимать строку, в этом случае анимация будет добавлена к очереди, представленной этой строкой. Когда используется пользовательское имя очереди анимации, то она не запускается автоматически, вы должны при этом использовать метод .dequeue( «имя очереди» ), чтобы запустить её.
  • specialEasing. Тип: PlainObject. Объект, содержащий одно или несколько свойств CSS, определенных параметром свойства и соответствующие им функции замедления. Добавлено в версии 1.4.
  • step. Тип: Function( Number now, Tween tween ). Функция вызывается для каждого анимируемого свойства каждого анимированного элемента. Эта функция дает возможность изменять Tween Object, чтобы изменить значение свойства, прежде чем оно будет установлено.
  • progress. Тип: Function. Функция, которая будет вызываться после каждого шага анимации, только один раз для каждого анимированного элемента, независимо от количества анимированных свойств. Добавлено в версии 1.8.
  • complete. Тип: Function. Функция (callback), которая будет выполнена после завершения анимации, она вызывается один раз для каждого соответствующего элемента (смотри выше).
  • start. Тип: Function (Promise Object animation). Функция, вызывается, когда анимация элемента начинается. Добавлено в версии 1.8.
  • done. Тип: Function (Promise Object animation, Boolean jumpedToEnd). Функция вызывается, когда анимация элемента завершается. Добавлено в версии 1.8.
  • fail. Тип: Function (Promise Object animation, Boolean jumpedToEnd). Функция вызывается, когда анимацию элемента не удается завершить. Добавлено в версии 1.8.
  • always. Тип: Function (Promise Object animation, Boolean jumpedToEnd). Функция вызывается, когда анимация элемента завершается или останавливается незавершенной. Добавлено в версии 1.8.

Определение и применение

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

С этим читают