来自JS的Css定位

Question

＆＃13;

＆＃13;

var is_show = false;
jQuery(function($) {
  $(document).ready(function() {
    $("#Side-Bar.button-slide").click(function() {
      return runFunction();
    });
    $("#Side-Bar.button-slide");
  });
});

function runFunction() {
  if (is_show) {
    is_show = false;
    $("#Side-Bar.button-slide").toggleClass('active');
    $('#Side-Bar').animate({
      'marginLeft': '-120px'
    }, 800);
    $('#Side-Bar.button-slide').animate({
      'marginLeft': '0px'
    }, 800);
    $('#content').animate({
      'Left': '0px'
    }, 800);

  } else {
    is_show = true;
    $("#Side-Bar.button-slide").toggleClass("active");
    $('#Side-Bar').animate({
      'marginLeft': '0px'
    }, 500);
    $('#Side-Bar.button-slide').animate({
      'marginLeft': '120px'
    }, 500);
    $('#content').animate({
      'Left': '120px'
    }, 500);
  }
  return false;
};

＆＃13;

#Side-Bar {
  left: 0;
  padding: 0;
  position: fixed;
  Top: 40%;
  Background: #101010;
  width: 120px;
  margin-left: -120px;
  z-index: 500;
}
#Side-Bar ul {
  margin: 0;
  padding: 0;
}
#Side-Bar ul li {
  list-style: none;
  text-align: center;
  margin: 0 auto;
}
#Side-Bar ul li a {
  margin: 0 auto;
  color: #9d9d9d;
  text-decoration: none;
  display: block;
  padding: 0 20px;
  text-align: center;
  line-height: 60px;
  font-size: 20px;
}
#Side-Bar ul li a:hover {
  color: #FFFFFF
}
#Side-Bar.button-slide {
  background: #000000;
  background-size: 10px 15px;
  position: fixed;
  width: 10px;
  height: 15px;
  margin: 90px 0 0 0;
  display: block;
  z-index: 999;
}
#Side-Bar.active {
  background: #000000;
  background-size: 10px 15px;
  position: fixed;
  width: 10px;
  height: 15px;
  display: block;
  z-index: 999;
}
#content {
  margin: 0 auto;
  Position: relative;
  background: #F12355;
  Height: 900px;
  Width: 90%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Side-Bar">
  <ul>
    <li><a href="#">Wide</a>
    </li>
    <li><a href="#">HD</a>
    </li>
    <li><a href="#">Standard</a>
    </li>
  </ul>
  <a href="#" id="Side-Bar" class="button-slide"></a>
</div>
<div id="content">
</div>

＆＃13;

＆＃13;

＆＃13;

所以，当我点击我的Side-Bar的按钮时，他向右走，我也需要我的内容正确（改变＆＃34;左＆＃34;位置＆＃34; 120px＆＃34;），我有它在那里，但它不起作用。 哪里有错误？我认为这是语法错误......请帮助...

Answer 1

您的动画功能需要小写Left。

$('#content').animate({
  'left': '120px'
}, 500);

$('#content').animate({
  'left': '0px'
}, 800);

Demo here