Von rechts nach links schieben?

Wie kann ich ein Div von kollabiert zu erweitert (und umgekehrt) wechseln lassen, aber von rechts nach links?

Fast alles, was ich da draußen sehe, ist immer von links nach rechts.

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

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

Dies kann nativ mit den jQueryUI-Methoden zum Ausblenden / Anzeigen erreicht werden. Z.B.

    // 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 Code hinzugefügt, um einen doppelten Rand beim Doppelklick zu vermeiden: http://jsfiddle.net/XNnHC/942/

Verwenden Sie es mit Lockerung;)

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

• Zusätzliche JavaScript-Codes entfernt.

• Klassennamen und einige CSS-Codes geändert

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

• Es wurde geändert, ob der Lockerungseffekt verwendet wird oder nicht

• Animationsgeschwindigkeit geändert

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

Schauen Sie sich dieses Arbeitsbeispiel für Fiddle an, das die jQuery-Benutzeroberfläche verwendet . Es ist eine Lösung, die ich ursprünglich von links nach rechts verwendet habe, aber ich habe sie so geändert, dass sie von rechts nach links funktioniert.

Der Benutzer kann schnell auf Links klicken, ohne die Animation zwischen den verfügbaren Bedienfeldern 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;
    });
});

Holen Sie sich HTML und CSS unter dem Link Fiddle.

Weißer Hintergrund und Linksauffüllung hinzugefügt, um eine bessere Effektdarstellung zu erzielen.

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 Sie möglicherweise auch "position: absolute" festlegen müssen.

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

Mögen..

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

Die GreenSock Animation Platform (GSAP) mitTweenLite/TweenMaxbietet viel flüssigere Übergänge mit weitaus größerer Anpassungsfähigkeit 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 breite 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 Animationstool, das als Grundlage für die GreenSock Animation Platform (GSAP) dient."

Sie können zuerst die Breite des Elements als 0 definieren, rechts schwebend und dann für den Fall, dass Sie es anzeigen möchten. Es wäre wie

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

So einfach ist das.

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

oder du kannst verwenden

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

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

Außerdem empfehle ich Ihnen, wenn der einzige Effekt, den Sie möchten, diesen Effekt nicht die jQuery-Benutzeroberfläche verwendet, da er zu schwer ist (wenn Sie ihn 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)'});
      }
  });

Überprüfen Sie dieses Beispiel

Wenn Sie divabsolut positioniert sind und die Breite kennen, können Sie einfach Folgendes verwenden:

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

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

Welches wird es vom Bildschirm schieben.

Alternativ können Sie auch einen Behälter einwickeln 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);