对Animate()jQuery ..打开和关闭列的疑问

Question

我对jQuery一无所知，所以我来找您的建议，我试图通过单击两列中的任何一个按钮来为我拥有的两列动画，我需要的是，通过单击左列中的按钮，它会增长，右列变小直到消失，当您再次单击该按钮时，大小返回到原样，反之亦然，反之亦然当您单击右列的按钮时，该列会生长，左列变小直到消失，当您再次单击该按钮时，从两个列中重新建立了尺寸，我正在尝试这样做使用jQuery，Animate((，使用宽度属性...在开始时，请尝试使用Tooggle，如果它允许我重新建立大小，但是动画总是向左介绍，因为那是那是最初的位置对象，我不能给正确的列置于浮动位置：正确，因为我是设计的，所以我尝试使用宽度，如果我可以让clomnas做我想要的第一个动画，但是我不知道如何通过再次单击按钮，恢复大小，这是我用于列的代码：

<div class="fila"  style="padding-left:3%; padding-right:0%; margin-right:0%; padding-top:3%;">
            <div class="col2 gift">
                <div class="center">
                    <button class="boton botonp" id="btnslide">Productos</button>
                </div>
            </div>
            <div class="sep">
                <img src="imagenes/separador.png" />
            </div>
            <div class="col2 servi">
                <div class="center">
                    <button class="boton botonp" id="btnslide2">Servicios</button>
                </div>
            </div>
        </div> 

这是Animate((

的jQuery

<script type="text/javascript">
    $(document).ready(function() {
        $('#btnslide').click(function() {
            $(".gift").animate({
                width:"96%"
            },2000);
            $(".servi").animate({
                width:0
            },2000);
        });
        $('#btnslide2').click(function() {
            $(".servi").animate({
                width:"96%"
            },2000);
            $(".gift").animate({
                width:0
            },2000);
        });
    });
</script> 

$(document).ready(function() {
 			$('#btnslide').click(function() {
				$(".gift").animate({
					width:"96%"
				},2000);
				$(".servi").animate({
					width:0
				},2000);
 			});
 			$('#btnslide2').click(function() {
 				$(".servi").animate({
					width:"96%"
				},2000);
 				$(".gift").animate({
					width:0
				},2000);
			});
		});

.col2,.sep{
  float: left;
}
.col2{
 width:45%;
 height: 300px;
 border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fila"  style="padding-left:3%; padding-right:0%; margin-right:0%; padding-top:3%;">
				<div class="col2 gift">
					<div class="center">
						<button class="boton botonp" id="btnslide">Productos</button>
					</div>
				</div>
				<div class="sep">
					<img src="imagenes/separador.png" />
				</div>
				<div class="col2 servi">
					<div class="center">
						<button class="boton botonp" id="btnslide2">Servicios</button>
					</div>
				</div>
			</div>

我该如何通过再次单击按钮，重新建立尺寸？

Answer 1

我正在挖掘更多的网络，并找到了答案，如果有人需要它，我就会留下它。

$(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);
    			});
			});

.col2, .sep{
  float: left;
}
.col2{
 width:48%;
 height: 300px;
 border: 1px solid red;
}

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<div class="fila"  style="padding-left:3%; padding-right:0%; margin-right:0%; padding-top:3%;">
				<div class="col2 regalo">
					<div class="center">
						<button class="boton botonp" id="btnslideop">Productos</button>
					</div>
				</div>
				<div class="sep">
					<img src="imagenes/separador.png" />
				</div>
				<div class="col2 servi">
					<div class="center">
						<button class="boton botonp" id="btnslide2op">Servicios</button>
					</div>
				</div>
			</div>