[SOLUCIONADO] Dudas con animate()

[zerobathory]

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?

[zerobathory]

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

Código Javascript:

$(function() {
                $('#btnslideop').live('click', function() {
                    $('.regalo').animate({
                        width: '96%'
                    }, 2000, function() {
                        $('#btnslideop').attr('id', 'btnslideopclo');
                    });
                    $(".servi").animate({
                        width:0
                    },2000);
                });
                $('#btnslideopclo').live('click', function() {
                    $('.regalo').animate({
                        width: '48%'
                    }, 2000, function() {
                        $('#btnslideopclo').attr('id', 'btnslideop');
                    });
                    $(".servi").animate({
                        width:'48%'
                    },2000);
                });
            });
            $(function() {
                $('#btnslide2op').live('click', function() {
                    $('.servi').animate({
                        width: '96%'
                    }, 2000, function() {
                        $('#btnslide2op').attr('id', 'btnslide2opclo');
                    });
                    $(".regalo").animate({
                        width:0
                    },2000);
                });
                $('#btnslide2opclo').live('click', function() {
                    $('.servi').animate({
                        width: '48%'
                    }, 2000, function() {
                        $('#btnslide2opclo').attr('id', 'btnslide2op');
                    });
                    $(".regalo").animate({
                        width:'48%'
                    },2000);
                });
            });