Von rechts nach links schieben?

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

Referenz: https://api.jquery.com/animate/

Dies kann nativ mit den jQueryUI-Methoden zum Verbergen/Anzeigen .. erreicht werden.

    // To slide something leftwards into view,
    // with a delay of 1000 msec
    $("div").click(function () {
          $(this).show("slide", { direction: "left" }, 1000);
    });

Referenz: http://docs.jquery.com/UI/Effects/Slide

Benutze das:

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

Live Demo

Verbesserte Version

Der Demo wurde etwas Code hinzugefügt, um Doppelränder beim Doppelklick zu verhindern: http://jsfiddle.net/XNnHC/942/

Verwenden Sie es mit der Lockerung;)

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

• Zusätzliche JavaScript-Codes wurden entfernt. 

• Klassennamen und einige CSS-Codes wurden geändert

• Funktion hinzugefügt, um herauszufinden, ob erweitert oder reduziert ist

• Geändert, ob der Linderungseffekt verwendet wird oder nicht

• Geänderte Animationsgeschwindigkeit

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

Werfen Sie einen Blick auf dieses Arbeitsbeispiel auf Fiddle, das jQuery UI ..__ verwendet, eine Lösung, die ich ursprünglich von links nach rechts verwendet habe, aber ich habe sie von rechts geändert nach links.

Der Benutzer kann schnell auf Links klicken, ohne die Animation zwischen den verfügbaren Bereichen zu unterbrechen.

Der JavaScript-Code ist einfach:

$(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;
    });
});

Erhalten Sie HTML und CSS unter dem Link Fiddle.

Weißer Hintergrund und Left-Padding wurden hinzugefügt, um die Darstellung des Effekts zu verbessern.

Benutze das

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

$(function() {
  $('.button').click(function() {
    $(this).toggleClass('active');
    $('.yourclass').toggle("slide", {direction: "right"}, 1000);
  });
});

Ich habe es so gemacht:

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

Beachten Sie, dass der Knoten "btn" vor der Animation ausgeblendet werden sollte und dass Sie möglicherweise auch "position: absolute" darauf setzen müssen.

Sie können zuerst die Breite des Elements als 0 definieren, nach rechts schwebend, und dann bei dem Ereignis, das Sie im Begriff haben, das Element anzuzeigen

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

So einfach ist das.

Eine andere erwähnenswerte Bibliothek ist animate.css . Es funktioniert hervorragend mit jQuery, und Sie können viele interessante Animationen erstellen, indem Sie einfach mit CSS-Klassen umschalten.

Mögen..

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

GreenSock Animation Platform (GSAP) mit TweenLiteTweenMax bietet viel glattere Übergänge mit weitaus größeren Anpassungsmöglichkeiten als jQuery- oder CSS3-Übergänge. Um CSS-Eigenschaften mit TweenLite/TweenMax zu animieren, benötigen Sie auch das Plugin "CSSPlugin". TweenMax schließt dies automatisch ein.

_/Laden Sie zunächst die TweenMax-Bibliothek:

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

Oder die leichte Version 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>

Rufen Sie dann Ihre Animation auf:

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

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

Sie können es auch mit einem ID-Selektor aufrufen:

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

Wenn Sie jQuery geladen haben, können Sie erweiterte erweiterte Selektoren verwenden, wie alle Elemente, die eine bestimmte Klasse enthalten:

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

Ausführliche Informationen finden Sie unter: TweenLite-Dokumentation

Laut ihrer Website: "TweenLite ist ein extrem schnelles, leichtes und flexibles Animationswerkzeug, das die Grundlage der GreenSock Animation Platform (GSAP) bildet."

Beispiel für eine Animation von rechts nach links ohne jQuery-Benutzeroberfläche, nur mit jQuery (jede Version siehe 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>

Überprüfen Sie das Beispiel hier.

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

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

Ein Beispiel, das ich mit dem Scroll gemacht habe (nur HTML, CSS und JS, nur mit der Jquery-Bibliothek). Wenn Sie nach unten scrollen, wird eine Schaltfläche nach links verschoben. 

Ich empfehle Ihnen auch, wenn der einzige Effekt, den Sie wollen, dieser Effekt ist. Verwenden Sie die jQuery-Benutzeroberfläche nicht, da sie zu schwer ist (wenn Sie sie nur dafür verwenden möchten).

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

Check dieses Beispiel

oder Sie können verwenden

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

Wenn Ihre div absolut positioniert ist und Sie die Breite kennen, können Sie einfach Folgendes verwenden:

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

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

Dadurch wird es vom Bildschirm entfernt.

Alternativ können Sie einen Container einschließen. 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);