Сдвинуть справа налево?

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

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

Это может быть достигнуто изначально с помощью методов jQueryUI hide / show. Например.

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

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

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

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

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

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

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

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

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

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

• Добавлена ​​возможность узнать, развернуто или свернуто

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

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

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

Взгляните на этот рабочий пример на 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.

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

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

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

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

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

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

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

Нравиться..

$ ("# слайд"). toggle (). toggleClass ('анимированный bounceInLeft');

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

$('#myDiv').toggle("slide:right");

Платформа анимации GreenSock (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 (GSAP)».

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

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

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

Пример анимации справа налево без 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>

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

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

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

Пример, сделанный мной с использованием прокрутки (только 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)'});
      }
  });

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

Если ваш 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);

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

Я сделал это с помощью SASS и JQuery (без пользовательского интерфейса JQuery), но все это может быть достигнуто с помощью собственного JS и CSS.

https://codepen.io/maxbethke/pen/oNzMLRa

var menuOpen = false

var init = () => {
    $(".menu__toggle, .menu__blackout").on("click", menuToggle)
}

var menuToggle = () => {
    console.log("Menu:Toggle");
    $(".menu__blackout").fadeToggle();

    if(menuOpen) { // close menu
        $(".menu__collapse").css({
            left: "-80vw",
            right: "100vw"
        });
    } else { // open menu
        $(".menu__collapse").css({
            left: "0",
            right: "20vw"
        });
    }

    menuOpen = !menuOpen;
}

$(document).ready(init);

.menu__toggle {
    position: absolute;
    right: 0;
    z-index: 1;
}

.menu__blackout {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10;
}

.menu__collapse {
  position: absolute;
  top: 0;
  right: 100vw;
  bottom: 0;
  left: -80vw;
  background: white;
  -webkit-transition: ease-in-out all 1s;
  transition: ease-in-out all 1s;
  z-index: 11;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="menu__toggle">Toggle menu</button>

<menu class="menu">
  <div class="menu__blackout"></div>
  <div class="menu__collapse">
    <ul class="list">
      <li class="list__item">
        <a class="list__item__link" href="#section1">Menu Item 1</a>
      </li>
      <li class="list__item">
        <a class="list__item__link" href="#section2">Menu Item 2</a>
      </li>
      <li class="list__item">
        <a class="list__item__link" href="#section3">Menu Item 3</a>
      </li>
      <li class="list__item">
        <a class="list__item__link" href="#section4">Menu Item 4</a>
      </li>
      <li class="list__item">
        <a class="list__item__link" href="#section5">Menu Item 5</a>
      </li>
    </ul>
  </div>
</menu>