Question

我有一个2列布局，左侧菜单有固定宽度，我跟随结构如http://blog.html.it/layoutgala/LayoutGala24.html中所述。

点击导航菜单，我试图将其隐藏到某些像素。

当导航菜单动画显示在左侧时，右侧内容如何自动调整？

JS

$("#navigation").on('click', function() {
  var $el = $(this), animateLeft;
  if(parseInt($el.css('margin-left')) === 0) {
    animateLeft = "-=180px";
  }else{
    animateLeft = "+=180px";
  }
  $(this).animate({
    marginLeft : animateLeft
  },500, function() {
    console.log("anim complete");
  });
});

演示 - http://codepen.io/anon/pen/hCmKl

Answer 1

试试这个：

$("#navigation").on('click', function() {
  var $el = $(this), animateLeft;
  if(parseInt($el.css('margin-left')) === 0) {
    animateLeft = "-=180px";
  }else{
    animateLeft = "+=180px";
  }
  $(this).animate({
      marginLeft : animateLeft
    },500, function() {
        console.log("anim complete");
    });
  $("#content").animate({
    marginLeft: animateLeft
  }, 500);
});

http://codepen.io/anon/pen/Ikgnm

Answer 2

你有固定的margin-left，所以在你的情况下，一个解决方案是为整个内容制作动画：

$("#navigation").on('click', function() {
  var $el = $(this).parent(), animateLeft;
  if(parseInt($el.css('margin-left')) === 0) {
    animateLeft = "-=180";
  }else{
    animateLeft = "+=180";
  }
  $(this).parent().animate({
      marginLeft : animateLeft
    },500, function() {
        console.log("anim complete");
    });

});

移动左列时，调整2列布局中的内容区域

2 个答案: