Soy nuevo en JQ tengo este script que encontré en internet y hace exactamente lo que necesito pero quiero que el deslizamiento sea de derecha a izquierda ¿Cómo puedo hacerlo? Por favor, ayuda
este es el código
<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>
Puede hacerlo mediante efectos adicionales como parte de jQuery-ui
$('.show_hide').click(function () {
$(".slidingDiv").toggle("slide");
});
[Enlace de prueba][2]
Ya sé que hace un año que se preguntó esto, pero sólo para la gente que va a visitar esta página estoy publicando mi solución.
Usando lo que @Aldi Unanto sugirió aquí es 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 algo al hacer clic. Luego agrego un chequeo si el elemento es visible o no. Cuando es visible lo oculto. Cuando está oculto lo muestro. Puedes cambiar la dirección a la izquierda o a la derecha y la duración de 200 ms a lo que quieras.
Editar: También he añadido
.stop(true,true)
para limpiar la cola y saltar al final. Leer sobre la parada de jQuery aquí