slideToggle JQuery da destra a sinistra

sono nuovo in JQ ho questo script che ho trovato su internet e fa esattamente quello che mi serve ma voglio che lo scorrimento sia da destra a sinistra come posso fare vero? si prega di aiutoslideToggle JQuery da destra a sinistra

questo è il codice

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

fonte

2013-06-24 benjo

Ho aggiunto una risposta per favore dare un'occhiata. –

È possibile farlo usando additional effects as a part of jQuery-ui

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

Test Link

fonte

2013-06-24 08:48:18

[puoi anche impostare 'direction: 'right'' ad esso] (http://jsfiddle.net/Spokey/qEjXj/5 /) – Spokey

Questo, insieme all'opzione di direzione, è la migliore risposta. –

Prova questo:

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

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

fonte

2013-06-24 08:45:59

Oppure puoi leggere questo fantastico tutorial: http: //www.learningjquery.com/2009/02/slide-elements-in-different-directions –

Ciò richiede jQuery UI –

So che è passato un anno da quando è stato chiesto, ma solo per le persone che visiteranno questa pagina pubblicherò la mia soluzione.

Utilizzando quello @Aldi Unanto suggerito qui è una risposta più completa:

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

Prima posso evitare il collegamento di fare qualcosa al clic. Quindi aggiungo un controllo se l'elemento è visibile o meno. Quando visibile lo nascondo. Quando nascosto lo mostro. Puoi cambiare la direzione verso sinistra o destra e la durata da 200 ms a qualsiasi cosa tu voglia.

Edit: Ho anche aggiunto

.stop(true,true)

per clearQueue e jumpToEnd. Read about jQuery stop here

fonte

2014-12-09 08:48:42 Spyros

Si prega di provare questo codice

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

fonte

2014-12-18 07:09:54 w3debugger

Questo codice non fa nulla a meno che non si usi l'interfaccia utente di jQuery. Tutte le opzioni predefinite che hai sono 'lente' e 'veloci' –

Inoltre, questo codice genererà un errore di sintassi poiché i parametri 'animate' dovrebbero essere passati come un oggetto (ti manca il' {} '). – vard

Questa sarebbe una risposta migliore se includesse una spiegazione insieme al codice. –

includono jQuery e jQuery UI plugin e provare questo

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

fonte

2016-04-30 10:46:41 Anbarasan

Prova questa

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

fonte

2016-11-16 09:07:41 Souvik

vorrei suggerire di utilizzare il seguito css

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

È quindi possibile utilizzare una semplice levetta funzioni:

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

Verrà visualizzato il menu di sovrapposizione da destra a sinistra. In alternativa, puoi utilizzare il posizionamento per modificare l'effetto dall'alto o dal basso, ovvero utilizzare bottom: 0; anziché top: 0; - vedrai scorrere il menu dall'angolo in basso a destra.

fonte

2017-02-24 12:42:33

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

fonte

2018-01-16 16:25:02 AlexanderPop

per favore aggiungi altra descrizione –

Grazie per questo snippet di codice, che potrebbe fornire un aiuto limitato e immediato. Una [spiegazione corretta] (https://meta.stackexchange.com/q/114762) migliorerebbe notevolmente il suo valore a lungo termine, mostrando perché questa è una buona soluzione al problema e renderebbe più utile ai futuri lettori con altri , domande simili. Per favore [modifica] (https://meta.stackoverflow.com/posts/360251/edit) la tua risposta per aggiungere qualche spiegazione, incluse le ipotesi che hai fatto. [Ref] (https://meta.stackoverflow.com/a/360251/8371915) – user8371915

slideToggle JQuery da destra a sinistra

risposta

Problemi correlati