0

所以基本上，我正在尝试使用“.animate”创建一个具有 4 列水平显示和隐藏的启动页面。目前，我已经成功创建了基本布局，但是 4 列所在的容器（打开一列时扩展为 5 的大小）在打开一列时从页面中心偏移。容器 div 绝对定位为以 x 和 y 轴为中心。我试图让整个 div 向左移回中心，但是当列关闭时，div 不会向后移动。所以我的问题是，当所有列都关闭时，如何让 div 移回？

 // JavaScript Document
$(document).ready(function(){
  $("#button1").click(function(){
      $(".row").not("#button1").animate();
    $("#slide1").animate({
      width:'toggle'
    });
    $("#slide2").animate({
        width:'hide'
    });
    $("#slide3").animate({
        width:'hide'
    });
    $("#slide4").animate({
        width:'hide'
    });
  });
  $("#button2").click(function(){
      $(".row").not("#button2").animate();
    $("#slide2").animate({
      width:"toggle"
    });
    $("#slide1").animate({
        width:"hide"
    });
    $("#slide3").animate({
        width:"hide"
    });
    $("#slide4").animate({
        width:"hide"
    });
  });
  $("#button3").click(function(){
      $(".row").not("#button3").animate();
    $("#slide3").animate({
      width:"toggle"
    });
    $("#slide1").animate({
        width:"hide"
    });
    $("#slide2").animate({
        width:"hide"
    });
    $("#slide4").animate({
        width:"hide"
    });
  });
  $("#button4").click(function(){
      $(".row").not("#button4").animate();
    $("#slide4").animate({
      width:"toggle"
    });
    $("#slide1").animate({
        width:"hide"
    });
    $("#slide3").animate({
        width:"hide"
    });
    $("#slide2").animate({
        width:"hide"
    });
  });
  // reposition container //
  $("#button1,#button2,#button3,#button4").click(function(){
      $("#container").animate({
          left:'50%',
          marginLeft:'-500px'
      });
  });
});

顺便说一句，我也只是在自学 jQuery，所以对于任何含糊之处，我深表歉意。我愿意尝试澄清。

4

1 回答 1

0

不确定我是否完全理解您要执行的操作，但我设置了一个我认为与您正在执行的操作相匹配的jsFiddle 。基本上，我真的很依赖 CSS 来处理定位。jQuery 只是用来展开和折叠所选列并重置容器宽度。而不是使用position:absolute我使用设置宽度和margin:0 auto. 这样，当容器改变大小时，我就不必担心计算左侧偏移位置之类的东西。

于 2013-03-19T19:36:10.440 回答