slideToggle JQuery rechts

nach links i bin neu in JQ ich dieses Skript habe ich im Internet gefunden und sein genau das tun, was ich brauche , aber ich möchte das Gleiten von rechts nach links sein wird, wie kann ich tun es? bitte helfenslideToggle JQuery rechts

Dies ist der Code

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script> 
<script type="text/javascript"> 

$(document).ready(function(){ 

     $(".slidingDiv").hide(); 
     $(".show_hide").show(); 

    $('.show_hide').click(function(){ 
    $(".slidingDiv").slideToggle(); 
    }); 

}); 

</script> 
<style> 

.slidingDiv { 
    height:300px; 
    background-color: #99CCFF; 
    padding:20px; 
    margin-top:10px; 
    border-bottom:5px solid #3399FF; 
} 

.show_hide { 
    display:none; 
} 
</style> 
</head> 

<body> 

<div class="slidingDiv"> 
Fill this space with really interesting content. <a href="#" class="show_hide">hide</a></div> 
<a href="#" class="show_hide">Show/hide</a>

Quelle

2013-06-24 benjo

Ich habe eine Antwort hinzugefügt, bitte werfen Sie einen Blick. –

Sie können diese additional effects as a part of jQuery-ui mit tun

$('.show_hide').click(function() { 
    $(".slidingDiv").toggle("slide"); 
});

Test Link

Quelle

2013-06-24 08:48:18

[Sie können auch 'direction: 'right'' dazu setzen] (http://jsfiddle.net/Spokey/qEjXj/5 /) – Spokey

Dies, zusammen mit der Richtungsoption, ist die beste Antwort. –

Try this:

$(this).hide("slide", { direction: "left" }, 1000);

$(this).show("slide", { direction: "left" }, 1000);

Quelle

2013-06-24 08:45:59

Oder Sie können dieses große Tutorial lesen: http: //www.learningjquery.com/2009/02/slide-elements-in-different-directions –

Dies erfordert jQuery UI –

Ich weiß, es ist ein Jahr her, seit das gefragt wurde, aber nur für Leute, die diese Seite besuchen werden, posten ich meine Lösung.

Durch die Verwendung von was @Aldi Unanto hier vorgeschlagen ist eine vollständigere Antwort:

jQuery('.show_hide').click(function(e) { 
    e.preventDefault(); 
    if (jQuery('.slidingDiv').is(":visible")) { 
     jQuery('.slidingDiv').stop(true,true).hide("slide", { direction: "left" }, 200); 
    } else { 
     jQuery('.slidingDiv').stop(true,true).show("slide", { direction: "left" }, 200); 
    } 
    });

Zuerst habe ich den Link von etwas zu tun auf Klick verhindern. Dann füge ich einen Haken, ob das Element sichtbar ist oder nicht. Wenn sichtbar, verstecke ich es. Wenn ich es ausgeblendet habe, zeige ich es. Sie können die Richtung von links oder rechts und die Dauer von 200 ms auf alles ändern, was Sie möchten.

Edit: Ich habe auch

.stop(true,true)

um clearQueue und jumpToEnd. Read about jQuery stop here

Quelle

2014-12-09 08:48:42 Spyros

Bitte versuchen Sie diesen Code

$(this).animate({'width': 'toggle'});

Quelle

2014-12-18 07:09:54 w3debugger

Dieser Code führt nur zur Verwendung von jQuery UI. Alle Standardoptionen du hast ist ‚langsam‘ und ‚schnell‘ –

Futhermore, wird dieser Code einen Syntaxfehler werfen als 'animate' Parameter sollten als Objekt übergeben werden (Sie verpassen die' {} '). – vard

Dies wäre eine bessere Antwort, wenn es eine Erklärung mit dem Code enthalten würde. –

umfassen JQuery und JQuery UI-Plugins und versuchen, diese

$("#LeftSidePane").toggle('slide','left',400);

Quelle

2016-04-30 10:46:41 Anbarasan

dieses Versuchen

$('.slidingDiv').toggle("slide", {direction: "right" }, 1000);

Quelle

2016-11-16 09:07:41 Souvik

Ich würde vorschlagen, dass Sie die folgenden CSS

.showhideoverlay { 
    width: 100%; 
    height: 100%; 
    right: 0px; 
    top: 0px; 
    position: fixed; 
    background: #000; 
    opacity: 0.75; 
}

Sie können dann eine einfache Umschaltfunktion verwenden:

$('a.open').click(function() { 
    $('div.showhideoverlay').toggle("slow"); 
});

Dies wird das Overlay-Menü von rechts nach links angezeigt werden. Alternativ können Sie die Positionierung verwenden, um den Effekt von oben oder unten zu ändern, d. H. Verwenden Sie bottom: 0; anstelle von top: 0; - Sie werden sehen, dass das Menü von rechts unten nach unten gleitet.

Quelle

2017-02-24 12:42:33

$("#mydiv").toggle(500,"swing");

Quelle

2018-01-16 16:25:02 AlexanderPop

fügen Sie bitte weitere Beschreibung –

Sie für diese Code-Schnipsel danken, die eine begrenzte, schnelle Hilfe bieten könnten. A [richtige Erklärung] (https://meta.stackexchange.com/q/114762) würde seinen langfristigen Wert stark verbessern, indem sie zeigt, warum dies eine gute Lösung für das Problem ist, und wäre es sinnvoller, auf künftige Leser macht mit anderen , ähnliche Fragen. Bitte [bearbeiten] (https://meta.stackoverflow.com/posts/360251/edit) Ihre Antwort, um einige Erklärungen hinzuzufügen, einschließlich der Annahmen, die Sie getroffen haben. [ref] (https://meta.stackoverflow.com/a/360251/8371915) – user8371915

slideToggle JQuery rechts

Antwort

Verwandte Themen