如何通过单击按钮调整div的大小，它变为全屏

Question

我希望div.panel-dashboard变成全屏，它的宽度和高度等于窗口的宽度和高度，点击fa-arrows-alt图标并点击fa-minus图标div.panel -dashboard通过动画返回其第一个大小。

             <div class="row">
   <div class="col-sm-6">
            <section class="panel-dashboard hide1">
                <div class="header color-purple-header">              
                    <div class="controls">
                        <i class="fa fa-close"></i>
                        <i class="fa fa-minus ml5"></i>
                        <i class="fa fa-arrows-alt ml5"></i>
                    </div>
                </div>
                <div class="body body2 color-purple-body">
                    text1
                </div>     
            </section>
        </div>
        <div class="col-sm-6">
            <section class="panel-dashboard hide1">
                <div class="header color-purple-header">              
                    <div class="controls">
                        <i class="fa fa-close"></i>
                        <i class="fa fa-minus ml5"></i>
                        <i class="fa fa-arrows-alt ml5"></i>
                    </div>
                </div>
                <div class="body body2 color-purple-body">
                    text2
                </div>     
            </section>
        </div>
    </div>
             $(document).ready(function () {
        $('.fa-arrow-circle-left').click(function () {
            var $win = $(window);         
            $('.panel-dashboard').animate({ height: $win.height() }, 500);
            $('.panel-dashboard').animate({ width: $win.width() }, 500);

        });
        $('.fa-minus').click(function () {
            var $win = $(window);         
            $('.panel-dashboard').animate({ height: 250px }, 500);
            $('.panel-dashboard').animate({ width: '100%' }, 500);

        });
    });

Answer 1

应引用

250px

＆＃13;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fa-arrow-circle-left">fa-arrow-circle-left</div>
<div class="row">
  <div class="col-sm-6">
    <section class="panel-dashboard hide1">
      <div class="header color-purple-header">
        <div class="controls">
          <i class="fa fa-close"></i>
          <i class="fa fa-minus ml5"></i>
          <i class="fa fa-arrows-alt ml5"></i>
        </div>
      </div>
      <div class="body body2 color-purple-body">
        text1
      </div>
    </section>
  </div>
  <div class="col-sm-6">
    <section class="panel-dashboard hide1">
      <div class="header color-purple-header">
        <div class="controls">
          <i class="fa fa-close"></i>
          <i class="fa fa-minus ml5">fa-minus</i>
          <i class="fa fa-arrows-alt ml5"></i>
        </div>
      </div>
      <div class="body body2 color-purple-body">
        text2
      </div>
    </section>
  </div>
</div>
<script>
  $(document).ready(function() {
    var $win = $(window);
    $('.fa-arrow-circle-left').click(function() {
      $('.panel-dashboard').animate({
        height: $win.height(),
        width: $win.width()
      }, 500);
    });
    $('.fa-minus').click(function() {
      $('.panel-dashboard').animate({
        height: "250px",
        width: '100%'
      }, 500);
    });
  });
</script>

＆＃13;

＆＃13;

＆＃13;