Foros del Web » Programando para Internet » Jquery »

dar el efecto toggle a div posicionandolo bien

Estas en el tema de dar el efecto toggle a div posicionandolo bien en el foro de Jquery en Foros del Web. hola forer@s, como les va miren esta imagen: http://www.subeimagenes.com/img/toggle-350048.html Subido en SubeImagenes.com creo habla por si misma, pero por si algun motivo no se ve ...
  #1 (permalink)  
Antiguo 02/08/2012, 10:48
Avatar de catpaw  
Fecha de Ingreso: mayo-2010
Ubicación: xalapa
Mensajes: 856
Antigüedad: 13 años, 10 meses
Puntos: 23
dar el efecto toggle a div posicionandolo bien

hola forer@s, como les va

miren esta imagen:

http://www.subeimagenes.com/img/toggle-350048.html

Subido en SubeImagenes.com

creo habla por si misma, pero por si algun motivo no se ve ahi les va la explicacion y el codigo:


un div absoluto a la derecha con una imagen de flecha hacia la izquierda que al darle clic con el efecto toggle deslice el div hacia la izquierda, pero que se detenga hasta que quede la imagen de la flecha visible y que al mismo tiempo la cambie por una flecha hacia la derecha

con el div "escondido" pero la flecha hacia la derecha visible, al dar clic sobre la misma el div se deslice hacia la derecha hasta su posicion original.

aqui tengo ya armado el div:

http://www.subeimagenes.com/img/div-350056.html

Subido en SubeImagenes.com

mi css:

Código HTML:
#accesos_directos{
	width:100px;
	height:300px;
    margin:30px auto auto 1010px;
	position:absolute;
}
#accesos_directos .clic_area_abrir{ /*boton para mostrar los accesos*/
	background:url(images/clic_area_open.png) no-repeat;
	width:15px;
	height:100px;
	float:right;
	cursor:pointer;
}
#accesos_directos .clic_area_cerrar{ /*boton para ocultar los accesos*/
	background:url(images/clic_area_close.png) no-repeat;
	width:15px;
	height:100px;
	float:right;
	cursor:pointer;
}
#accesos_directos .accesos_area{
	width:85px;
	height:300px;
	background:#5c5c5c;
	float:left;
}
mi html:

Código HTML:
<div id="accesos_directos">
    	<a id="close_accesos" href="javascript:;" class="clic_area_cerrar"></a>
        <a id="open_accesos" href="javascript:;"  class="clic_area_abrir" style="display:none;"></a>
        <div class="accesos_area"></div>
</div> 
mi intento de jquery

Código:
jQuery('#close_accesos').click(function() {
    	jQuery('#accesos_directos').toggle(1000);
		document.getElementById('open_accesos').style.display='block';
		document.getElementById('close_accesos').style.display='none';
  });
jQuery('#open_accesos').click(function() {
    	jQuery('#accesos_directos').toggle(1000);
		document.getElementById('open_accesos').style.display='none';
		document.getElementById('close_accesos').style.display='block';
  });
explico un poco:

al dar clic en algun enlace por su id acciona el jquery, esta linea si hace el efecto:

jQuery('#accesos_directos').toggle(1000);

peroooo desliza el div a la izquierda hasta desaparecerlo y ya no lo vuelvo a ver, estas lineas deberian cambiar las imagenes de flechas

document.getElementById('open_accesos').style.disp lay='block';
document.getElementById('close_accesos').style.dis play='none';

les agradeceria mucho me indiquen la forma correcta para realizar esto y si no alguna alternativa parecida por favor

edito: no es obligatorio usar toggle, mientras el div se deslice hacia derecha o izquierda

Última edición por catpaw; 02/08/2012 a las 11:58
  #2 (permalink)  
Antiguo 02/08/2012, 19:07
Avatar de catpaw  
Fecha de Ingreso: mayo-2010
Ubicación: xalapa
Mensajes: 856
Antigüedad: 13 años, 10 meses
Puntos: 23
Respuesta: dar el efecto toggle a div posicionandolo bien

ya lo resolvi por si a alguien le interesa, cambie un poquito el script:

Código:
jQuery('#close_accesos').click(function() {
	jQuery('#accesos_directos').animate({ 'marginLeft' : "-=85px" });
	document.getElementById('open_accesos').style.display='block';
	document.getElementById('close_accesos').style.display='none';
});		
jQuery('#open_accesos').click(function() {
	jQuery('#accesos_directos').animate({ 'marginLeft' : "+=85px" });
	document.getElementById('open_accesos').style.display='none';
	document.getElementById('close_accesos').style.display='block';
});
works perfect ;)

Saludos!!
  #3 (permalink)  
Antiguo 23/04/2013, 06:11
 
Fecha de Ingreso: abril-2013
Mensajes: 6
Antigüedad: 10 años, 11 meses
Puntos: 0
Respuesta: dar el efecto toggle a div posicionandolo bien

he intentado hacerlo que dices pero no hace nada
no se mueve

Etiquetas: efecto, html, toggle, 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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 08:28.