jQuery实现框里画面的展开、收起和停止

以下是一个简单的示例，展示了如何使用jQuery来控制一个简单的画面(面板)的展开、收起和停止。这里的“画面”是一个<div>元素，可以通过CSS来设计样式。

HTML:

<button id="expand">展开</button>
<button id="collapse">收起</button>
<button id="stop">停止</button>
<div id="panel">画面内容</div>

CSS:

#panel {
  width: 100px;
  height: 100px;
  background-color: #f0f0f0;
  transition: height 1s;
  overflow: hidden;
}
 
.collapsed {
  height: 0;
}

jQuery:

$(document).ready(function() {
  var $panel = $('#panel');
 
  $('#expand').click(function() {
    $panel.removeClass('collapsed');
  });
 
  $('#collapse').click(function() {
    $panel.addClass('collapsed');
  });
 
  $('#stop').click(function() {
    $panel.css('transition', 'none');
    $panel.addClass('collapsed');
    setTimeout(function() {
      $panel.css('transition', 'height 1s');
    }, 0);
  });
});

这段代码中，#panel是要展开和收起的画面。.collapsed类定义了当画面处于收起状态时的样式，即height设为0。transition属性用于平滑地过渡画面的尺寸变化。

点击“展开”按钮会移除.collapsed类，使画面展开；点击“收起”按钮会添加.collapsed类，使画面收起；点击“停止”按钮会临时取消过渡效果，使画面立即收起，然后重新启用过渡效果。