Foros del Web » Programando para Internet » Jquery »

Mover div izquierda derecha con un boton + jquery

Estas en el tema de Mover div izquierda derecha con un boton + jquery en el foro de Jquery en Foros del Web. hola, bueno mi situacion es que tengo un div escondido -1500px a la izquierda y un boton que me lo mueve 1500px a la derecha ...
  #1 (permalink)  
Antiguo 24/10/2011, 13:50
 
Fecha de Ingreso: octubre-2011
Mensajes: 3
Antigüedad: 12 años, 5 meses
Puntos: 0
Mover div izquierda derecha con un boton + jquery

hola, bueno mi situacion es que tengo un div escondido -1500px a la izquierda y un boton que me lo mueve 1500px a la derecha pues para crear un efecto de mostrar y esconder el div, mi problema es como hacre para que con el mismo boton en el segundo click me lo esconda de nuevo, es decir me lo corra -1500px a la izquierda.
es algo asi como que en el primer click lo corra 1500px a la derecha y con el segundo lo vuelva a esconder -1500px a la izquierda. Gracias


Código HTML:
Ver original
  1. <!DOCTYPE html>
  2.     <head>
  3.           <script src="http://code.jquery.com/jquery-latest.js"></script>
  4.           <style>
  5.           body {
  6.             overflow-x:hidden;}
  7.          
  8.           .block {
  9.               position:relative;
  10.               background-color:#abc;
  11.               width:80%;
  12.               height:800px;
  13.               margin-left:-1500px;
  14.               border:5px solid black;
  15.                     }
  16.  
  17.         </style>
  18.      
  19.     </head>
  20.     <body>
  21.          <button id="right">&raquo;</button>
  22.         <div class="block"></div>
  23.  
  24.         <script>
  25.         $("#right").click(function(){
  26.           $(".block").animate({"left": "+=1500px"}, "slow");
  27.         });
  28.         </script>
  29.     </body>
  30. </html>
  #2 (permalink)  
Antiguo 25/10/2011, 11:53
Avatar de Trublux  
Fecha de Ingreso: octubre-2010
Ubicación: Madrid
Mensajes: 355
Antigüedad: 13 años, 5 meses
Puntos: 48
Respuesta: Mover div izquierda derecha con un boton + jquery

Usa "toggle":
Código Javascript:
Ver original
  1. $(function(){
  2.     $('#right').toggle(
  3.         function(){
  4.             $(".block").animate({"left": "1500px"}, "slow");
  5.         }, function(){
  6.             $(".block").animate({"left": "-1500px"}, "slow");
  7.         }
  8.     );
  9. });
__________________
eZ Publish Developer Basic Legacy
eZ Publish Developer Basics (4.4)
Alojamientos rurales en España
  #3 (permalink)  
Antiguo 24/04/2013, 16:37
 
Fecha de Ingreso: abril-2013
Mensajes: 6
Antigüedad: 10 años, 11 meses
Puntos: 0
Respuesta: Mover div izquierda derecha con un boton + jquery

Cita:
Iniciado por Trublux Ver Mensaje
Usa "toggle":
Código Javascript:
Ver original
  1. $(function(){
  2.     $('#right').toggle(
  3.         function(){
  4.             $(".block").animate({"left": "1500px"}, "slow");
  5.         }, function(){
  6.             $(".block").animate({"left": "-1500px"}, "slow");
  7.         }
  8.     );
  9. });
el que pusiste no me funciona use este:
Código Javascript:
Ver original
  1. $(document).ready(function ()
  2. {
  3.  
  4.     $('#abrir').click(function()
  5.     {
  6.                 $(".cmenu").animate({"left": "-124px"}, "slow");
  7.     },
  8.             function()
  9.             {
  10.                 $(".cmenu").animate({"left": "0px"}, "slow");
  11.             }
  12.         );
  13.  
  14.          
  15.      
  16. });

pero solo me hace el segundo animate por lo tanto no regresa a la posicion original al clickear de nuevo haber si podesi ayudarme,gracias
  #4 (permalink)  
Antiguo 25/04/2013, 01:49
Avatar de Trublux  
Fecha de Ingreso: octubre-2010
Ubicación: Madrid
Mensajes: 355
Antigüedad: 13 años, 5 meses
Puntos: 48
Respuesta: Mover div izquierda derecha con un boton + jquery

En el ejemplo que pusiste no salía ningún elemento que tuviese la clase "cmenu"...
__________________
eZ Publish Developer Basic Legacy
eZ Publish Developer Basics (4.4)
Alojamientos rurales en España
  #5 (permalink)  
Antiguo 25/04/2013, 05:40
 
Fecha de Ingreso: abril-2013
Mensajes: 6
Antigüedad: 10 años, 11 meses
Puntos: 0
Respuesta: Mover div izquierda derecha con un boton + jquery

perdon te pongo como tengo el html y el css haber si asi puedes ehcarme una mano que me esta volviendo loco,jejeje
html:
Código HTML:
Ver original
  1. <div class="ctexto"></div>
  2. <div id="conmenu" class="cmenu">
  3. <div id="abrir" class="menuoculto"></div>
  4. <div class="menu"></div>
  5. </div>

css:
Código CSS:
Ver original
  1. .cmenu
  2. {
  3.     height: 300px;
  4.     width: 155px;
  5.     position: absolute;
  6.     top: 178px;
  7.     bottom: 40px;
  8.     left: -124px;
  9. }
  10. .menuoculto
  11. {
  12.     height: 82px;
  13.     width: 28px;
  14.     background-image: url(../imagenes/Menutrasparanteoculto.png);
  15.     background-repeat: no-repeat;
  16.     cursor: pointer;
  17.     position: absolute;
  18.     left: 117px;
  19.     top: 21px;
  20.     -webkit-transition: all;
  21.     -moz-transition: all;
  22.     -ms-transition: all;
  23.     -o-transition: all;
  24.     transition: all;
  25.    
  26. }
  27. .menu
  28. {
  29.     height: 300px;
  30.     width: 127px;
  31.     top: 1px;
  32.     bottom: 40px;
  33.     background-image: url(../imagenes/Menutrasparante.png);
  34.     background-repeat: no-repeat;
  35.     left: 0px;
  36.     position: absolute;
  37.    
  38. }

en el jquery tengo esto
Código Javascript:
Ver original
  1. $(document).ready(function ()
  2. {
  3.  
  4.  
  5.   $('#abrir').click(function()
  6.     {
  7.                 $(".cmenu").animate({"left": "-124px"}, "slow");
  8.     },
  9.             function()
  10.             {
  11.                 $(".cmenu").animate({"left": "0px"}, "slow");
  12.             }
  13.         );
  14.        
  15.        
  16.          
  17.      
  18. });

lo he intentado poniendo el el jquery esto:
Código Javascript:
Ver original
  1. $(document).ready(function ()
  2. {
  3.  
  4.  
  5.   $('#abrir').click(function()
  6.     {
  7.                 $(".cmenu").animate({"left": "-124px"}, "slow");
  8.     },
  9.             function()
  10.             {
  11.                 $(".cmenu").animate({"left": "0px"}, "slow");
  12.             }
  13.         );
  14.     $('#abrir').click(function()
  15.     {
  16.                 $(".cmenu").animate({"left": "0px"}, "slow");
  17.     },
  18.             function()
  19.             {
  20.                 $(".cmenu").animate({"left": "-124px"}, "slow");
  21.             }
  22.         );
  23.        
  24.        
  25.          
  26.      
  27. });

pero sale y se guarda solo
  #6 (permalink)  
Antiguo 25/04/2013, 06:34
 
Fecha de Ingreso: abril-2013
Mensajes: 6
Antigüedad: 10 años, 11 meses
Puntos: 0
Respuesta: Mover div izquierda derecha con un boton + jquery

lo he conseguido solucionar pongo codigo por si le sirve ah alguien
html:
Código HTML:
Ver original
  1. <div id="conmenu" class="cmenu">
  2. <div id="cerrar" class="menuvisible"></div>
  3. <div id="abrir" class="menuoculto"></div>
  4. <div class="menu"></div>
  5. </div>


css:
Código CSS:
Ver original
  1. .cmenu
  2. {
  3.     height: 300px;
  4.     width: 155px;
  5.     position: absolute;
  6.     top: 178px;
  7.     bottom: 40px;
  8.     left: -124px;
  9. }
  10. .menuoculto
  11. {
  12.     height: 82px;
  13.     width: 28px;
  14.     background-image: url(../imagenes/Menutrasparanteoculto.png);
  15.     background-repeat: no-repeat;
  16.     cursor: pointer;
  17.     position: absolute;
  18.     left: 117px;
  19.     top: 21px;
  20.     display:block; 
  21. }
  22. .menuvisible
  23. {
  24.     height: 82px;
  25.     width: 28px;
  26.     background-image: url(../imagenes/Menutrasparanteoculto.png);
  27.     background-repeat: no-repeat;
  28.     cursor: pointer;
  29.     position: absolute;
  30.     left: 117px;
  31.     top: 21px;
  32.     display:none;
  33.  
  34. }
  35. .menu
  36. {
  37.     height: 300px;
  38.     width: 127px;
  39.     top: 1px;
  40.     bottom: 40px;
  41.     background-image: url(../imagenes/Menutrasparante.png);
  42.     background-repeat: no-repeat;
  43.     left: 0px;
  44.     position: absolute;
  45.    
  46. }


jquery:
$(document).ready(function ()
{


$('#abrir').click(function()
{
$(".cmenu").animate({"left": "-124px"}, "slow");
},
function()
{
$(".cmenu").animate({"left": "0px"}, "slow"),
$('#abrir').css('display','none'),
$('#cerrar').css('display','block');
},
$('#cerrar').click(function()
{
$(".cmenu").animate({"left": "-124px"}, "slow"),
$('#cerrar').css('display','none'),
$('#abrir').css('display','block');
}
)
);

});
  #7 (permalink)  
Antiguo 02/05/2013, 09:15
Avatar de alberto510a  
Fecha de Ingreso: abril-2013
Mensajes: 351
Antigüedad: 10 años, 10 meses
Puntos: 35
Toma leí el post y me pareció interesante aquí te dejo otra forma que se me ocurrió a mi de como hacerlo.

El Script:

Código:
<script>
$(document).ready(function(){
		var contador = 0;
	$('#desplazar').click(function efecto(){
	if (contador/2==0){
	$('#div').animate({'left':10+'px'});
	contador+=1;
	}
	else{
	$('#div').animate({'left':-260+'px'});
	contador+=-1;	
	}
	});

});
</script>
Y el HTML:

Código HTML:
<div id="div" style="background-color:rgba(0,255,0,1);width:200px;height:200px; position:absolute;left:-250px;">
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<input type="button" id="desplazar" value="desplazar" /> 

Etiquetas: derecha, html, izquierda, js, botones
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:32.