Question

我对jquery知之甚少，所以我提出你的建议，我正在尝试动画两列我的动画，通过单击任意两列中的按钮，我需要的是点击左侧列中的按钮，它增长，右列变小，直到它消失，当您再次单击该按钮时，尺寸将恢复原样，反之亦然，相反，当您单击按钮时右列，该列增长，左列变小，直到它消失，当您再次单击该按钮时，将从两列重新建立大小，我正在尝试使用jquery，animate（），使用width属性...在开始时尝试使用tooggle，如果它允许我重新建立大小，但动画总是向左移动，因为那是对象的初始位置，我无法给出右栏一个位置浮动：对，因为我desacomoda的设计，所以我试图做宽度，如果我可以做c lomnas按照我的意愿做第一个动画，但是我不知道如何通过再次单击按钮来恢复大小，这是我用于列的代码：

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

怀疑animate（）jquery ...打开和关闭列

1 个答案: