Von rechts nach links gleiten?

Question

Wie kann ich ein Div von eingeklappt zu ausgeklappt (und umgekehrt) wechseln, aber von rechts nach links?

Das meiste, was ich da draußen sehe, ist immer von links nach rechts.

Answer 1

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

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

Answer 2

Dies kann nativ mit den jQueryUI hide/show Methoden erreicht werden. Beispiel.

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

Answer 3

Verwenden Sie dies:

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

Live-Demo

Verbesserte Version

Der Demo wurde etwas Code hinzugefügt, um doppelte Ränder bei Doppelklick zu verhindern: 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 herauszufinden, ob sie expandiert oder kollabiert ist

• Geändert, ob Lockerungseffekt verwendet werden soll oder nicht

• Geänderte Animationsgeschwindigkeit

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

Answer 4

Werfen Sie einen Blick auf dieses Arbeitsbeispiel auf Fiddle, das die jQuery UI . 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.

Es ermöglicht dem Benutzer, schnell auf Links zu klicken, ohne die Animation zwischen den verfügbaren Panels 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;
    });
});

HTML und CSS erhalten Sie über den Fiddle-Link.

Weißer Hintergrund und Links-Padding hinzugefügt, um den Effekt besser darzustellen.

Answer 5

Dies verwenden

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