Css 从 JS 定位

Question

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

#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%;
}

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

所以，当我点击我的边栏按钮时，他向右移动，我需要我的内容也向右移动（将 "Left" 位置更改为“120px”），我有它，但它没有工作。我哪里有错误？我认为这是语法错误...请帮助...

Answer 1

您的动画函数中需要一个小写 Left。

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

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

Demo here.

Css 从 JS 定位

Css positioning from JS

html

javascript

css

jquery

hover