使用 jQuery Animate 从画布上推送内容

Question

如何将.css method 添加到此 jQuery 中，以便将内容推离画布，而不是将侧边栏覆盖在内容上。

jQuery(function( $ ){

$('.button').click(function() {

    $('.sidebar').animate({
         width: 'toggle'}, 
        'slow'
        );

  });

});

.sidebar {
     width: 350px;
     height: 100%;
     position: fixed;
     background-color: #f5f5f5;
     display: none;
     padding: 20px;
}

.content {
     width: 700px;
     float: right;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="button">Toggle</button>
<div class="sidebar">
This is the slide out sidebar content
</div>

<div class="content">
This is the main content area. This is the main content area. This is the main content area. This is the main content area. This is the main content area. This is the main content area.
</div>

我在想这样的事情可能会奏效，但不知道如何将它包含在 jQuery 中现有的 .animate method 中：

$('.content').css('marginLeft') = '350px'; 

Answer 1

 jQuery(function( $ ){
  var counter = 0;
  $('.button').click(function() {
    $('.sidebar').animate({width: 'toggle'}, 'slow');
    if(counter === 0) {
     $('.content').animate({width: 300}, 'slow');
     counter++ ;
    } else {
    $('.content').animate({width: 700}, 'slow');
    counter-- ;
    }
  });
});

你可以像这样编写 Jquery 代码。示例 => https://fiddle.jshell.net/27n3kvdu/