多个动画jQuery -添加填充和显示另一个div

Question

我的朋友们

所以我有一个侧边栏，当用户点击一个按钮时，我想要滑进滑出。当侧边栏滑出时，我希望页面主体添加填充，这样侧边栏就不会隐藏页面内容。我有它的工作，它只是动画非常跳跃。有什么建议吗。这是我所拥有的。

var userQueueVis = false
$(document).on('click', '#user-queue-button', function() {
  if (userQueueVis == false) {
    $('.user-queue').show('slide', {direction: 'right'}, { duration: 200, queue: false });
    $(".main").animate({ 'padding-right' : '200px' }, { duration: 200, queue: false });
    $("#user-queue-button").addClass("active-button");
    userQueueVis = true;
  } else {
    $('.user-queue').hide('slide', {direction: 'right'}, { duration: 200, queue: false });
    $(".main").animate({ 'padding-right' : '0px' }, { duration: 200, queue: false });
    $("#user-queue-button").removeClass("active-button");
    userQueueVis = false;
  }
});

Answer 1

根据你的需要，我的代码片段并不完整，但它为你提供了下一步要做的命中点，它切换(显示和隐藏)侧边栏(红色背景)，并向指定的父div (#main)添加填充。希望这能有所帮助。

​

$(document).ready(function(){
  $('button').click(function(){
    $("#sidebar").toggle("slide",function(){
      $("#main").toggleClass("padding_10px");
    });  
  });
});

#main{border:1px solid blue;}
#sidebar{
 height:100vh;
 width:250px;
 background-color:red;
}
.padding_10px{padding:10px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="main">
  <button>Click me!</button>
  <div id="sidebar">
    
  </div>
</div>

​