How to smoothly minimize flying draggable popup with jQuery

Question

I write some popup window, that will fly on the view part of page while scrolling them, window is also draggable.

See it below:

	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 < 50; i++) {
	    jq('#txt').append('<p>THIS IS SPARTA!!!</p>');
	  }
	});

	jq(window).scroll(function() {
	  $el.stop().animate({
	    "top": (jq(window).scrollTop() + 10) + "px"
	  }, "fast");
	});

	.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;
	}
	

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<div class="Box" title="">
  <div id="header">
    <table cellpadding="0px" cellspacing="0px" border="0px" width="100%">
      <thead>
        <col width="20px" />
        <col width="88%" />
        <col width="10%" />
      </thead>
      <tbody>
        <tr>
          <td id="piccha">
            <img src="dragger.png" />
          </td>
          <td id="title">
            User!
          </td>
          <td id="btnmin" class="minibtn">
            Mini
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div id="content">
    <p id="msg">text text text
      <br/>text text:</p>
    <span id="time">Super Numbers 12312</span>
    <br/>
    <p id="note">The note</p>
  </div>
</div>
<button id="btn">show box</button>
<button id="btntxt">add 30 text</button>

<div id="txt">

</div>

Also avaliable on JSfiddle.net

How I can minimize this window using "Mini" button with smooth effect? Under "minimize" I mean smooth hide #msg and #note elements, after that smooth resize window. The same for "Maximize" but smooth showing.

Answer 1

You can use slideUp and slideDown for smoothly showing and hiding the div elements,

The .slideUp() method animates the height of the matched elements. This causes lower parts of the page to slide up, appearing to conceal the items. Once the height reaches 0 (or, if set, to whatever the CSS min-height property is), the display style property is set to none to ensure that the element no longer affects the layout of the page.

The .slideDown() method animates the height of the matched elements. This causes lower parts of the page to slide down, making way for the revealed items.

Demo

You can pass "slow" or "fast" or "duration" (time in milliseconds) to control the speed of the div displayed after click event.

JQuery

jq("#btnmin").click(function () {
    if (isMini) {
        jq('.Box #content #msg').slideDown();
        jq('.Box #content #note').slideDown();
        isMini = false;
    } else {
        jq('.Box #content #msg').slideUp();
        jq('.Box #content #note').slideUp();
        isMini = true;
    }
});

Answer 2

Try this it. it will work greatly:

jq("#btnmin").click(function () {
    if (isMini) {
        jq('.Box #content #msg').show(500);
        jq('.Box #content #note').show(500);
        isMini = false;
    } else {
        jq('.Box #content #msg').hide(500);
        jq('.Box #content #note').hide(500);
        isMini = true;
    }
});

To increase speed decrease value. like: 500 -> 300.

http://jsfiddle.net/ketan156/4xatmnt7/3/