Jquery effects — sliding

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

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

$( 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Как построить плавающую строку меню при прокрутке вниз

Присоединяемые события

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

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

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

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

С этим читают

• Svg
• Element.outerhtml
• Animated gifs, animated images & animations
• Как сделать гифку в фотошопе из картинок, фотографий или видео?
• Php serialize() function
• Мультипликация
• Css 3d transforms
• Уроки flash
• Adobe animate cc 2020 v20.5.1.31044 крякнутый на русском
• Цикл курсов «профессия 3d-аниматор»