Слайд справа налево?

391

Как сделать так, чтобы div перешел из свернутого в развернутый (и наоборот), но сделать это справа налево?

Почти все, что я вижу, всегда слева направо.

Райан Монтгомери
источник

Ответы:

378
$("#slide").animate({width:'toggle'},350);

Ссылка: https://api.jquery.com/animate/

JQGeek
источник
Вы также можете добавить, 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);
    });

Ссылка: http://docs.jquery.com/UI/Effects/Slide

EnGassa
источник
141
@ekerner - для этого требуется JQueryUI, который представляет собой массивную библиотеку. Если все, что вам нужно, это простой переход между слайдами, это, вероятно, не ответ;)
Джесси
9
Это лучший способ, если у вас установлен jQueryUI.
steampowered
5
Чтобы уточнить - минимальный файл составляет не менее 235 КБ! Это хорошо, но это значительно увеличит вашу страницу, как отмечает @Jesse
Ukuser32
1
Используя пользовательский конструктор и удаляя все, кроме анимации слайдов, можно получить минимизированный JS менее 20 КБ.
Скайлар Итнер
Я бы хотел, чтобы в документах по пользовательскому интерфейсу JQuery были такие примеры. Спасибо
andreszs
77

Использовать этот:

$('#pollSlider-button').animate({"margin-right": '+=200'});

Live демо

Улучшенная версия

Некоторый код был добавлен в демонстрационную версию, чтобы избежать двойного поля при двойном щелчке: http://jsfiddle.net/XNnHC/942/

Используйте это с облегчением;)

http://jsfiddle.net/XNnHC/1591/

  • Лишние коды JavaScript удалены.

  • Имена классов и некоторые CSS-коды изменены

  • Добавлена ​​функция поиска, если она развернута или свернута

  • Изменено ли использовать эффект ослабления или нет

  • Изменена скорость анимации

http://jsfiddle.net/XNnHC/1808/

h0mayun
источник
2
Вычисляет значения в «пикселях», поэтому не подходит для «%»
Фейсал Ашфак,
он перемещается влево при каждом нажатии.
Эльор
Вы можете проверить внешнюю ширину и использовать ее для добавления правого поля
Tofandel
22

Взгляните на этот рабочий пример Fiddle, который использует пользовательский интерфейс jQuery . Это решение, которое я использовал изначально слева направо, но я изменил его для работы справа налево.

Это позволяет пользователю быстро нажимать на ссылки, не нарушая анимацию среди доступных панелей.

Код JavaScript прост:

$(document).ready(function(){
    // Mostra e nascondi view-news
    var 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.

Добавлен белый фон и отступы слева для лучшего представления эффекта.

Эрвин Юлий
источник
8
требуется пользовательский интерфейс jQuery
Jeroen K
Да. Это указано в примере ссылки, предоставленной [ jsfiddle.net/erwinjulius/az4JL/]
Эрвин Джулиус
19

Использовать этот

<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script>
    $(document).ready(function(){
        $("#flip").click(function () {
            $("#left_panel").toggle("slide", { direction: "left" }, 1000);
        });
    });
</script>
Shwet
источник
7
Да, вам нужен jQuery UI для расширенных опций ослабления
zanderwar
10
$(function() {
  $('.button').click(function() {
    $(this).toggleClass('active');
    $('.yourclass').toggle("slide", {direction: "right"}, 1000);
  });
});
Хиль
источник
11
Я все за комментарии, но этот код довольно понятен.
Джон
7

Я сделал это так:

var btn_width = btn.width();
btn.width(0);
btn.show().animate({width: btn_width}, {duration: 500});

Обратите внимание, что узел "btn" должен быть скрыт перед анимацией, и вам также может потребоваться установить для него "position: absolute".

AbstractVoid
источник
Почему бы не использовать width: 'toggle'? btn.show().animate({width: 'toggle'}, {duration: 500});это все, что тебе нужно, я верю.
Аарт ден Брабер
6

Другая заслуживающая упоминания библиотека - это animate.css . Он отлично работает с jQuery, и вы можете делать много интересных анимаций, просто переключая класс CSS.

Подобно..

$ ("# slide"). toggle (). toggleClass ('animated bounceInLeft');

Соичи Хаяси
источник
5

GreenSock Animation Platform (GSAP) сTweenLite/TweenMaxобеспечивает более плавные переходы с гораздо большей настройкой, чем переходы jQuery или CSS3. Чтобы анимировать свойства CSS с помощью TweenLite / TweenMax, вам также понадобится их плагин под названием «CSSPlugin». TweenMax включает это автоматически.

Сначала загрузите библиотеку TweenMax:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>

Или облегченная версия, TweenLite:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/plugins/CSSPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/easing/EasePack.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenLite.min.js"></script>

Затем назовите вашу анимацию:

 var myObj= document.getElementById("myDiv");

// Syntax: (target, speed, {distance, ease})
 TweenLite.to(myObj, .7, { x: 500, ease: Power3.easeOut});

Вы также можете вызвать его с помощью селектора идентификаторов:

 TweenLite.to("#myID", .7, { x: 500, ease: Power3.easeOut});

Если у вас загружен jQuery, вы можете использовать более сложные расширенные селекторы, как и все элементы, содержащие определенный класс:

 // This will parse the selectors using jQuery's engine.
TweenLite.to(".myClass", .7, { x: 500, ease: Power3.easeOut});

Для получения полной информации см .: Документация TweenLite

По словам их сайта: «TweenLite - чрезвычайно быстрый, легкий и гибкий инструмент анимации, который служит основой GreenSock Animation Platform (GSAP)».

TetraDev
источник
4

Вы можете определить сначала ширину элемента как 0, с плавающей точкой справа, а затем в случае, когда вы собираетесь его показать .. это будет выглядеть так:

$('#the_element_to_slide_from_right_left').animate({ width:'your desired width' }, 600);

Просто как тот.

Теоди С. Сегуин
источник
4

Пример анимации справа налево без jQuery UI , только с jQuery (любая версия, см. Https://api.jquery.com/animate/ ).

$(document).ready(function() {
  var contentLastMarginLeft = 0;
  $(".wrap").click(function() {
    var box = $(".content");
    var newValue = contentLastMarginLeft;
    contentLastMarginLeft = box.css("margin-left");
    box.animate({
      "margin-left": newValue
    }, 500);
  });
});
.wrap {
  background-color: #999;
  width: 200px;
  overflow: hidden;
}
.content {
  width: 100%;
  margin-left: 100%;
  background-color: #eee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
  click here
  <div class="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>

fremail
источник
3

или вы можете использовать

$('#myDiv').toggle("slide:right");
6563cc10d2
источник
4
При ответе на десятилетний вопрос четырнадцатью другими существующими ответами было бы полезно объяснить, какой новый подход дает ваш ответ, и был ли он действительным, когда был задан вопрос, или использует ли он методы, которые стали доступны в течение этих десяти лет ,
Джейсон Аллер
1

Пример, сделанный мной с использованием прокрутки (только HTML, CSS и JS, только с библиотекой jquery). При прокрутке вниз кнопка сдвинется влево.

Кроме того, я предлагаю вам, если вам нужен только этот эффект, не используйте jQuery UI, потому что он слишком тяжелый (если вы просто хотите использовать его для этого).

$(window).scroll(function(){
  if ($(this).scrollTop() > 100) {
          event.preventDefault();
          $(".scrollToTop").css({'transform': 'translate(0px, 0px)'});
      } else {
          $(".scrollToTop").css({'transform': 'translate(40px, 0px)'});
      }
  });

Проверьте этот пример

Джорди Висенс
источник
1
Да, CSS переходы являются одним из лучших способов достичь этого в настоящее время.
Том Том
1

Если ваш divабсолютно позиционирован и вы знаете ширину, вы можете просто использовать:

#myDiv{
position:absolute;
left: 0;
width: 200px;
}

$('#myDiv').animate({left:'-200'},1000);

Который сдвинет его с экрана.

Кроме того, вы можете обернуть его контейнером div

#myContainer{
position:relative;
width: 200px;
overflow: hidden;
}

#myDiv{
position:absolute;
top: 0;
left: 0;
width: 200px;
}

<div id="myContainer">

<div id="myDiv">Wheee!</div>

</div>

$('#myDiv').animate({left:'-200'},1000);
freeworlder
источник