jQueryアニメーションを使用してコンテンツをキャンバスに表示しない

Question

をこの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のコードを実行することができますこのようにSample =>https://fiddle.jshell.net/27n3kvdu/