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）添加填充。希望这有帮助。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

1 个答案: