javascript - 如何使用 jQuery 平滑地最小化飞行的可拖动弹出窗口

Question

我写了一些弹出窗口，滚动时会在页面的 View 部分飞行，窗口也是可拖动的。

请看下面:

	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>

还有 avaliable on JSfiddle.net

如何使用“迷你”按钮最小化此窗口且效果流畅？在“最小化”下，我的意思是在平滑调整大小窗口之后平滑隐藏#msg 和#note 元素。 “最大化”相同，但显示流畅。

Answer 1

您可以使用 slideUp和 slideDown为了平滑地显示和隐藏 div 元素，

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

您可以通过“slow”或“fast”或“duration”(以毫秒为单位的时间)来控制点击事件后显示的div的速度。

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