Mover div izquierda derecha con un boton + jquery

diego_angc · #1 (**permalink**) 24/10/2011, 13:50

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<!DOCTYPE html>
<html>
    <head>
          <script src="http://code.jquery.com/jquery-latest.js"></script>
          <style>
          body {
            overflow-x:hidden;}
          
          .block {
              position:relative;
              background-color:#abc;
              width:80%;
              height:800px;
              margin-left:-1500px;
              border:5px solid black;
                    }
 
        </style>
      
    </head>
    <body>
         <button id="right">&raquo;</button>
        <div class="block"></div>
 
        <script>
        $("#right").click(function(){
          $(".block").animate({"left": "+=1500px"}, "slow");
        });
        </script>
    </body>
</html>

Trublux · #2 (**permalink**) 25/10/2011, 11:53

Usa "toggle":

Código Javascript:

Ver original$(function(){
    $('#right').toggle(
        function(){
            $(".block").animate({"left": "1500px"}, "slow");
        }, function(){
            $(".block").animate({"left": "-1500px"}, "slow");
        }
    );
});

wolflone1983 · #3 (**permalink**) 24/04/2013, 16:37

Cita:

Iniciado por Trublux

Usa "toggle":

Código Javascript:

Ver original$(function(){
    $('#right').toggle(
        function(){
            $(".block").animate({"left": "1500px"}, "slow");
        }, function(){
            $(".block").animate({"left": "-1500px"}, "slow");
        }
    );
});

el que pusiste no me funciona use este:

Código Javascript:

Ver original$(document).ready(function () 
{
  
    $('#abrir').click(function()
    {
                $(".cmenu").animate({"left": "-124px"}, "slow");
    }, 
            function()
            {
                $(".cmenu").animate({"left": "0px"}, "slow");
            }
        );
 
         
     
});

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

Trublux · #4 (**permalink**) 25/04/2013, 01:49

En el ejemplo que pusiste no salía ningún elemento que tuviese la clase "cmenu"...

wolflone1983 · #5 (**permalink**) 25/04/2013, 05:40

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<div class="ctexto"></div>
<div id="conmenu" class="cmenu">
<div id="abrir" class="menuoculto"></div>
<div class="menu"></div>
</div>

css:

Código CSS:

Ver original.cmenu
{
    height: 300px;
    width: 155px;
    position: absolute;
    top: 178px;
    bottom: 40px;
    left: -124px;
}
.menuoculto
{
    height: 82px;
    width: 28px;
    background-image: url(../imagenes/Menutrasparanteoculto.png);
    background-repeat: no-repeat;
    cursor: pointer;
    position: absolute;
    left: 117px;
    top: 21px;
    -webkit-transition: all;
    -moz-transition: all;
    -ms-transition: all;
    -o-transition: all;
    transition: all;
    
}
.menu
{
    height: 300px;
    width: 127px;
    top: 1px;
    bottom: 40px;
    background-image: url(../imagenes/Menutrasparante.png);
    background-repeat: no-repeat;
    left: 0px;
    position: absolute;
    
}

en el jquery tengo esto

Código Javascript:

Ver original$(document).ready(function () 
{
  
 
  $('#abrir').click(function()
    {
                $(".cmenu").animate({"left": "-124px"}, "slow");
    }, 
            function()
            {
                $(".cmenu").animate({"left": "0px"}, "slow");
            }
        );
        
        
         
     
});

lo he intentado poniendo el el jquery esto:

Código Javascript:

Ver original$(document).ready(function () 
{
  
 
  $('#abrir').click(function()
    {
                $(".cmenu").animate({"left": "-124px"}, "slow");
    }, 
            function()
            {
                $(".cmenu").animate({"left": "0px"}, "slow");
            }
        );
    $('#abrir').click(function()
    {
                $(".cmenu").animate({"left": "0px"}, "slow");
    }, 
            function()
            {
                $(".cmenu").animate({"left": "-124px"}, "slow");
            }
        );
        
        
         
     
});

pero sale y se guarda solo

wolflone1983 · #6 (**permalink**) 25/04/2013, 06:34

lo he conseguido solucionar pongo codigo por si le sirve ah alguien
html:

Código HTML:

Ver original<div id="conmenu" class="cmenu">
<div id="cerrar" class="menuvisible"></div>
<div id="abrir" class="menuoculto"></div>
<div class="menu"></div>
</div>

css:

Código CSS:

Ver original.cmenu
{
    height: 300px;
    width: 155px;
    position: absolute;
    top: 178px;
    bottom: 40px;
    left: -124px;
}
.menuoculto
{
    height: 82px;
    width: 28px;
    background-image: url(../imagenes/Menutrasparanteoculto.png);
    background-repeat: no-repeat;
    cursor: pointer;
    position: absolute;
    left: 117px;
    top: 21px;
    display:block;  
}
.menuvisible
{
    height: 82px;
    width: 28px;
    background-image: url(../imagenes/Menutrasparanteoculto.png);
    background-repeat: no-repeat;
    cursor: pointer;
    position: absolute;
    left: 117px;
    top: 21px;
    display:none;
 
}
.menu
{
    height: 300px;
    width: 127px;
    top: 1px;
    bottom: 40px;
    background-image: url(../imagenes/Menutrasparante.png);
    background-repeat: no-repeat;
    left: 0px;
    position: absolute;
    
}

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

});

alberto510a · #7 (**permalink**) 02/05/2013, 09:15

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