Foros del Web » Programando para Internet » Jquery »

[SOLUCIONADO] Dudas con animate()

Estas en el tema de Dudas con animate() en el foro de Jquery en Foros del Web. sé muy poco sobre jquery, por eso acudo a su asesoramiento, estoy tratando de animar dos columnas que tengo, esto al hacer clic en un ...
  #1 (permalink)  
Antiguo 21/02/2018, 12:27
 
Fecha de Ingreso: enero-2012
Mensajes: 55
Antigüedad: 7 años, 10 meses
Puntos: 1
Dudas con animate()

sé muy poco sobre jquery, por eso acudo a su asesoramiento, estoy tratando de animar dos columnas que tengo, esto al hacer clic en un boton en cualquiera de las dos columnas, lo que necesito es que al hacer clic en el boton de la columna izquierda, ésta crezca y la columna derecha se vaya haciendo chica hasta que desaparezca, y que al darle clic otra vez en ese boton, los tamaños regresen a tal cual como estaba, lo mismo viceversa, que al darle clic en el boton de la columna derecha, ésa columna crezca y la columna izquierda se vaya haciendo chica hasta que desaparezca, y que al darle clic otra vez en ese boton, los tamaños se reestablezcan de ambas columnas, lo estoy tratando de hacer con animate() de jquery, usando el atributo width... en un inicio lo intente con tooggle ese, si me permite reestablecer el tamaño, pero la animacion se va siempre a la izquierda, porque esa es la posicion inicial del objeto, no le puedo dar a la columna derecha una posicion float: right porque me desacomoda el diseño, por eso lo he tratado de hacer con width y si puedo hacer que las clomnas hagan la primer animacion como quiero, pero no tengo idea de como hacer que al darle clic de nuevo al boton, se reestablezcan los tamaños, este es el codigo que estoy usando para las columnas:


Código HTML:
<div class="fila"  style="padding-left:3%; padding-right:0%; margin-right:0%; padding-top:3%;">
				<div class="col2 regalo">
					<div class="centrado">
						<button class="boton botonp" id="btnslide">Productos</button>
					</div>
				</div>
				<div class="separador">
					<img src="imagenes/separador.png" />
				</div>
				<div class="col2 servi">
					<div class="centrado">
						<button class="boton botonp" id="btnslide2">Servicios</button>
					</div>
				</div>
			</div> 
Este es el jquery con animate()

Código HTML:
<script type="text/javascript">
		$(document).ready(function() {
 			$('#btnslide').click(function() {
				$(".regalo").animate({
					width:"96%"
				},2000);
				$(".servi").animate({
					width:0
				},2000);
 			});
 			$('#btnslide2').click(function() {
 				$(".servi").animate({
					width:"96%"
				},2000);
 				$(".regalo").animate({
					width:0
				},2000);
			});
		});
	</script> 
Como podría hacer que al darle clic otra vez en los botones, se reestablezcan los tamaños?
  #2 (permalink)  
Antiguo 21/02/2018, 17:51
 
Fecha de Ingreso: enero-2012
Mensajes: 55
Antigüedad: 7 años, 10 meses
Puntos: 1
Respuesta: Dudas con animate()

Buscando en toda la web, encontre la respuesta, la coloco aqui por quien la necesite


Código Javascript:
Ver original
  1. $(function() {
  2.                 $('#btnslideop').live('click', function() {
  3.                     $('.regalo').animate({
  4.                         width: '96%'
  5.                     }, 2000, function() {
  6.                         $('#btnslideop').attr('id', 'btnslideopclo');
  7.                     });
  8.                     $(".servi").animate({
  9.                         width:0
  10.                     },2000);
  11.                 });
  12.                 $('#btnslideopclo').live('click', function() {
  13.                     $('.regalo').animate({
  14.                         width: '48%'
  15.                     }, 2000, function() {
  16.                         $('#btnslideopclo').attr('id', 'btnslideop');
  17.                     });
  18.                     $(".servi").animate({
  19.                         width:'48%'
  20.                     },2000);
  21.                 });
  22.             });
  23.             $(function() {
  24.                 $('#btnslide2op').live('click', function() {
  25.                     $('.servi').animate({
  26.                         width: '96%'
  27.                     }, 2000, function() {
  28.                         $('#btnslide2op').attr('id', 'btnslide2opclo');
  29.                     });
  30.                     $(".regalo").animate({
  31.                         width:0
  32.                     },2000);
  33.                 });
  34.                 $('#btnslide2opclo').live('click', function() {
  35.                     $('.servi').animate({
  36.                         width: '48%'
  37.                     }, 2000, function() {
  38.                         $('#btnslide2opclo').attr('id', 'btnslide2op');
  39.                     });
  40.                     $(".regalo").animate({
  41.                         width:'48%'
  42.                     },2000);
  43.                 });
  44.             });

Etiquetas: dudas
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 23:03.