使用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代碼like this.Sample =>https://fiddle.jshell.net/27n3kvdu/