title: How to smoothly minimize flying draggable popup with jQuery
body: <p>I write some popup window, that will fly on the view part of page while scrolling them, window is also draggable.</p>
  
  <p>See it below:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> var jq = jQuery.noConflict();
   var $el = jq(".Box");
   var $btnmini = jq(".sessionCD #btnmin");
   var isMini = false; //Панелька минимизирована.
  
   $el.draggable({
     cursor: "grab",
     containment: 'window',
     drag: function(event,
       ui) {
       jq(this).css('cursor',
         'grabbing');
     },
     stop: function(event,
       ui) {
       jq(this).css('cursor',
         'grab');
     },
  
   });
  
  jq("#btnmin").click(function () {
   if (isMini) {
       jq('.Box #content #msg').show();
          jq('.Box #content #note').show();
    isMini = false;
   } else {
          jq('.Box #content #msg').hide();
          jq('.Box #content #note').hide();
    isMini = true;
   }
  });
  
  
   jq('#btn').click(function() {
     $el.show();
   });
  
   jq('#btntxt').click(function() {
     var i = 0;
     for (i = 0; i &lt; 50; i++) {
       jq('#txt').append('&lt;p&gt;THIS IS SPARTA!!!&lt;/p&gt;');
     }
   });
  
   jq(window).scroll(function() {
     $el.stop().animate({
       "top": (jq(window).scrollTop() + 10) + "px"
     }, "fast");
   });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code> .Box {
     cursor: "grab";
     position: absolute;
     left: 2px;
     top: 2px;
     width: 300px;
     height: auto;
     display: none;
     margin: 1px;
     padding: 2px;
     z-index: 100000;
     border-width: 1px;
     border-style: solid;
     border-color: #AAA #CECECE #E6E6E6;
     background: none repeat scroll 0% 0% #F1F1F1;
     box-shadow: 0px 1px 1px 0px #CECECE inset;
     border-radius: 8px;
     text-align: center;
   }
   .Box #header {
     height: 20px;
     background: none repeat scroll 0% 0% #D4E8CD;
     border-bottom: 1px solid #83A478;
     color: #416833;
   }
   .Box #header #title {
     text-align: center;
     font-weight: bold;
   }
   .minibtn {
     margin-right: 2px;
   }
   .minibtn:hover {
     cursor: pointer;
     font-weight: bold;
   }
   .sessionCD #time {
     font-family: Georgia, Times, Times New Roman, serif;
     font-size: 19px;
     font-weight: bold;
     text-align: center;
     margin-left: 5px;
     margin-right: 5px;
   }
   </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"&gt;&lt;/script&gt;
  &lt;div class="Box" title=""&gt;
    &lt;div id="header"&gt;
      &lt;table cellpadding="0px" cellspacing="0px" border="0px" width="100%"&gt;
        &lt;thead&gt;
          &lt;col width="20px" /&gt;
          &lt;col width="88%" /&gt;
          &lt;col width="10%" /&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
          &lt;tr&gt;
            &lt;td id="piccha"&gt;
              &lt;img src="dragger.png" /&gt;
            &lt;/td&gt;
            &lt;td id="title"&gt;
              User!
            &lt;/td&gt;
            &lt;td id="btnmin" class="minibtn"&gt;
              Mini
            &lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
    &lt;/div&gt;
    &lt;div id="content"&gt;
      &lt;p id="msg"&gt;text text text
        &lt;br/&gt;text text:&lt;/p&gt;
      &lt;span id="time"&gt;Super Numbers 12312&lt;/span&gt;
      &lt;br/&gt;
      &lt;p id="note"&gt;The note&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;button id="btn"&gt;show box&lt;/button&gt;
  &lt;button id="btntxt"&gt;add 30 text&lt;/button&gt;
  
  &lt;div id="txt"&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Also <a href="http://jsfiddle.net/arhangelsoft/4xatmnt7/1/" rel="nofollow">avaliable on JSfiddle.net</a><br/></p>
  
  <p><strong>How I can minimize this window using "Mini" button with smooth effect?</strong>
  Under "minimize" I mean  smooth hide #msg and #note elements, after that smooth resize window. The same for "Maximize" but smooth showing.</p>