jQuery 애니메이션을 사용하여 내용을 캔버스로 푸시

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/