Вы также можете добавить, paddingLeft: 'toggle', paddingRight: 'toggle'когда элемент имеет внутреннее заполнение.
piotr_cz
17
Работает нормально, только скользит слева направо при попытке. Возможно ли сделать его анимацией наоборот?
августа
2
Единственная проблема в том, что если внутри есть контент, он «сдавливает» его горизонтально, заставляя элементы управления перемещаться / изменять размер / оборачивать и т. Д. Есть ли хорошее решение для этого?
Нил Барнвелл
1
Ваш код должен быть больше CSSпохож на настоящий слайд слева
AmerllicA
1
@NeilBarnwell, если можете, поместите содержимое в упаковку фиксированной ширины и получите контейнер overflow: hidden.
Бен Филипп
239
Этого можно достичь с помощью методов скрытия / показа jQueryUI. Например.
// To slide something leftwards into view,// with a delay of 1000 msec
$("div").click(function(){
$(this).show("slide",{ direction:"left"},1000);});
@ekerner - для этого требуется JQueryUI, который представляет собой массивную библиотеку. Если все, что вам нужно, это простой переход между слайдами, это, вероятно, не ответ;)
Джесси
9
Это лучший способ, если у вас установлен jQueryUI.
steampowered
5
Чтобы уточнить - минимальный файл составляет не менее 235 КБ! Это хорошо, но это значительно увеличит вашу страницу, как отмечает @Jesse
Ukuser32
1
Используя пользовательский конструктор и удаляя все, кроме анимации слайдов, можно получить минимизированный JS менее 20 КБ.
Скайлар Итнер
Я бы хотел, чтобы в документах по пользовательскому интерфейсу JQuery были такие примеры. Спасибо
Это позволяет пользователю быстро нажимать на ссылки, не нарушая анимацию среди доступных панелей.
Код JavaScript прост:
$(document).ready(function(){// Mostra e nascondi view-newsvar active ="europa-view";
$('a.view-list-item').click(function(){var divname=this.name;
$("#"+active ).hide("slide",{ direction:"right"},1200);
$("#"+divname).delay(400).show("slide",{ direction:"right"},1200);
active = divname;});});
Получить HTML и CSS по ссылке Fiddle.
Добавлен белый фон и отступы слева для лучшего представления эффекта.
Почему бы не использовать width: 'toggle'? btn.show().animate({width: 'toggle'}, {duration: 500});это все, что тебе нужно, я верю.
Аарт ден Брабер
6
Другая заслуживающая упоминания библиотека - это animate.css . Он отлично работает с jQuery, и вы можете делать много интересных анимаций, просто переключая класс CSS.
GreenSock Animation Platform (GSAP) сTweenLite/TweenMaxобеспечивает более плавные переходы с гораздо большей настройкой, чем переходы jQuery или CSS3. Чтобы анимировать свойства CSS с помощью TweenLite / TweenMax, вам также понадобится их плагин под названием «CSSPlugin». TweenMax включает это автоматически.
По словам их сайта:
«TweenLite - чрезвычайно быстрый, легкий и гибкий инструмент анимации, который служит основой GreenSock Animation Platform (GSAP)».
Вы можете определить сначала ширину элемента как 0, с плавающей точкой справа, а затем в случае, когда вы собираетесь его показать .. это будет выглядеть так:
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="wrap">
click here
<divclass="content">
I would like to have a div go from collapsed to expanded (and vice versa), but do so from right to left. Most everything I see out there is always left to right.
</div></div>
При ответе на десятилетний вопрос четырнадцатью другими существующими ответами было бы полезно объяснить, какой новый подход дает ваш ответ, и был ли он действительным, когда был задан вопрос, или использует ли он методы, которые стали доступны в течение этих десяти лет ,
Джейсон Аллер
1
Пример, сделанный мной с использованием прокрутки (только HTML, CSS и JS, только с библиотекой jquery). При прокрутке вниз кнопка сдвинется влево.
Кроме того, я предлагаю вам, если вам нужен только этот эффект, не используйте jQuery UI, потому что он слишком тяжелый (если вы просто хотите использовать его для этого).
Ответы:
Ссылка: https://api.jquery.com/animate/
источник
paddingLeft: 'toggle', paddingRight: 'toggle'
когда элемент имеет внутреннее заполнение.CSS
похож на настоящий слайд слеваoverflow: hidden
.Этого можно достичь с помощью методов скрытия / показа jQueryUI. Например.
Ссылка: http://docs.jquery.com/UI/Effects/Slide
источник
Использовать этот:
Live демо
Улучшенная версия
Некоторый код был добавлен в демонстрационную версию, чтобы избежать двойного поля при двойном щелчке: http://jsfiddle.net/XNnHC/942/
Используйте это с облегчением;)
http://jsfiddle.net/XNnHC/1591/
Лишние коды JavaScript удалены.
Имена классов и некоторые CSS-коды изменены
Добавлена функция поиска, если она развернута или свернута
Изменено ли использовать эффект ослабления или нет
Изменена скорость анимации
http://jsfiddle.net/XNnHC/1808/
источник
Взгляните на этот рабочий пример Fiddle, который использует пользовательский интерфейс jQuery . Это решение, которое я использовал изначально слева направо, но я изменил его для работы справа налево.
Это позволяет пользователю быстро нажимать на ссылки, не нарушая анимацию среди доступных панелей.
Код JavaScript прост:
Получить HTML и CSS по ссылке Fiddle.
Добавлен белый фон и отступы слева для лучшего представления эффекта.
источник
Использовать этот
источник
источник
Я сделал это так:
Обратите внимание, что узел "btn" должен быть скрыт перед анимацией, и вам также может потребоваться установить для него "position: absolute".
источник
width: 'toggle'
?btn.show().animate({width: 'toggle'}, {duration: 500});
это все, что тебе нужно, я верю.Другая заслуживающая упоминания библиотека - это animate.css . Он отлично работает с jQuery, и вы можете делать много интересных анимаций, просто переключая класс CSS.
Подобно..
источник
GreenSock Animation Platform (GSAP) с
TweenLite
/TweenMax
обеспечивает более плавные переходы с гораздо большей настройкой, чем переходы jQuery или CSS3. Чтобы анимировать свойства CSS с помощью TweenLite / TweenMax, вам также понадобится их плагин под названием «CSSPlugin». TweenMax включает это автоматически.Сначала загрузите библиотеку TweenMax:
Или облегченная версия, TweenLite:
Затем назовите вашу анимацию:
Вы также можете вызвать его с помощью селектора идентификаторов:
Если у вас загружен jQuery, вы можете использовать более сложные расширенные селекторы, как и все элементы, содержащие определенный класс:
Для получения полной информации см .: Документация TweenLite
По словам их сайта: «TweenLite - чрезвычайно быстрый, легкий и гибкий инструмент анимации, который служит основой GreenSock Animation Platform (GSAP)».
источник
Вы можете определить сначала ширину элемента как 0, с плавающей точкой справа, а затем в случае, когда вы собираетесь его показать .. это будет выглядеть так:
Просто как тот.
источник
Пример анимации справа налево без jQuery UI , только с jQuery (любая версия, см. Https://api.jquery.com/animate/ ).
источник
Проверьте пример здесь.
https://jsfiddle.net/q1pdgn96/2/
источник
или вы можете использовать
источник
Пример, сделанный мной с использованием прокрутки (только HTML, CSS и JS, только с библиотекой jquery). При прокрутке вниз кнопка сдвинется влево.
Кроме того, я предлагаю вам, если вам нужен только этот эффект, не используйте jQuery UI, потому что он слишком тяжелый (если вы просто хотите использовать его для этого).
Проверьте этот пример
источник
Если ваш
div
абсолютно позиционирован и вы знаете ширину, вы можете просто использовать:Который сдвинет его с экрана.
Кроме того, вы можете обернуть его контейнером
div
источник