Question

如何将.css method添加到此jQuery中，以便将内容从画布中推出，而不是将侧边栏覆盖在内容上。

＆＃13;

jQuery(function( $ ){

$('.button').click(function() {

    $('.sidebar').animate({
         width: 'toggle'}, 
        'slow'
        );

  });

});

＆＃13;

.sidebar {
     width: 350px;
     height: 100%;
     position: fixed;
     background-color: #f5f5f5;
     display: none;
     padding: 20px;
}

.content {
     width: 700px;
     float: right;
 }

＆＃13;

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

＆＃13;

我在想这样的事情可能有用，但不确定如何将它包含在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 =＆gt; https://fiddle.jshell.net/27n3kvdu/

使用jQuery Animate推送内容关闭画布

1 个答案: