left - slideToggle JQuery de derecha a izquierda
slidetoggle jquery ejemplo (8)
Por favor intente este código
$(this).animate({''width'': ''toggle''});
Soy nuevo en JQ Tengo este script que encontré en Internet y hago exactamente lo que necesito, pero quiero que el deslizamiento sea de derecha a izquierda. ¿Cómo puedo hacerlo? por favor ayuda
este es el codigo
<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>
Prueba esto
$(''.slidingDiv'').toggle("slide", {direction: "right" }, 1000);
Prueba esto:
$(this).hide("slide", { direction: "left" }, 1000);
$(this).show("slide", { direction: "left" }, 1000);
Puedes hacer esto usando efectos adicionales como parte de jQuery-ui
$(''.show_hide'').click(function () {
$(".slidingDiv").toggle("slide");
});
Sé que ha pasado un año desde que se solicitó esto, pero solo para las personas que van a visitar esta página, estoy publicando mi solución.
Al utilizar lo que @Aldi Unanto sugiere aquí, hay una respuesta más 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);
}
});
Primero evito que el enlace haga nada al hacer clic. Luego agrego un cheque si el elemento es visible o no. Cuando es visible lo escondo. Cuando oculto lo muestro. Puede cambiar la dirección hacia la izquierda o hacia la derecha y la duración desde 200 ms hasta lo que desee.
Edición: también he añadido
.stop(true,true)
con el fin de borrarQueue y jumpToEnd. Lea acerca de jQuery parada aquí
Te sugiero que uses el siguiente css
.showhideoverlay {
width: 100%;
height: 100%;
right: 0px;
top: 0px;
position: fixed;
background: #000;
opacity: 0.75;
}
A continuación, puede utilizar una función de alternar simple:
$(''a.open'').click(function() {
$(''div.showhideoverlay'').toggle("slow");
});
Esto mostrará el menú de superposición de derecha a izquierda. Alternativamente, puede usar la posición para cambiar el efecto desde arriba o desde abajo, es decir, use bottom: 0; en lugar de top: 0; - Verá un menú deslizante desde la esquina inferior derecha.
incluye los plugins de Jquery y Jquery UI y prueba esto
$("#LeftSidePane").toggle(''slide'',''left'',400);
$("#mydiv").toggle(500,"swing");