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

356

Как я могу отделить div от спящего до расширенного (и наоборот), но делать это справа налево?

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

Показать ещё 1 комментарий
Теги:
position

13 ответов

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

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

  • 5
    это не похоже на работу
  • 0
    Вы также можете добавить paddingLeft: 'toggle', paddingRight: 'toggle' когда элемент имеет внутреннее заполнение.
Показать ещё 7 комментариев
207

Это может быть достигнуто изначально с помощью методов hide/show 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

  • 126
    @ekerner - для этого требуется JQueryUI, который представляет собой массивную библиотеку. Если все, что вам нужно, это простой слайд-переход, то это, вероятно, не ответ;)
  • 8
    Это лучший способ, если у вас установлен jQueryUI.
Показать ещё 3 комментария
65

Используйте это:

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

Живая демонстрация

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

В демонстрационный код добавлен некоторый код, чтобы дважды удвоить двойной клик: http://jsfiddle.net/XNnHC/942/

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

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

  • Дополнительные коды JavaScript удалены.

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

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

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

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

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

  • 2
    Не работает в Chrome ??
  • 2
    Вычисляет значения в «px», поэтому не подходит для «%»
Показать ещё 2 комментария
19

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

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

Код 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.

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

  • 7
    требует JQuery UI
  • 0
    Да. Это указано в примере ссылки, предоставленной [ jsfiddle.net/erwinjulius/az4JL/]
12

Слишком просто:

<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>
8
$(function() {
  $('.button').click(function() {
    $(this).toggleClass('active');
    $('.yourclass').toggle("slide", {direction: "right"}, 1000);
  });
});
  • 2
    Добавьте несколько комментариев к вашему коду.
  • 11
    Я все за комментарии, но этот код довольно понятен.
7

Я сделал это следующим образом:

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

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

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

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

Как..

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

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>
4

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

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

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

3

Посмотрите пример здесь.

$("#slider").animate({width:'toggle'});

https://jsfiddle.net/q1pdgn96/2/

  • 3
    Вы проверили этот ответ, прежде чем опубликовать свой?
3

Платформа анимации GreenSock (GSAP)20 > с 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});

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

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

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

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

Подробные сведения см. в следующих разделах: Документация TweenLite

Согласно их веб-сайту: "TweenLite - чрезвычайно быстрый, легкий и гибкий инструмент анимации, который служит основой платформы анимации GreenSock (GSAP)".

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 переходы являются одними из лучших способов достичь этого в настоящее время.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню