让元素“隐藏”到它的中心？

Question

我注意到在JQuery中使用hide()函数时，如下所示：

$("myDiv").hide("slow");

它总是“折叠”到div的左上角。有没有办法让它折叠到中心？ （在我说的是div配置"position: absolute;"）

的情况下

Answer 1

jQuery UI具有“缩放”效果，可能是您想要的： http://jqueryui.com/demos/hide/

http://jsfiddle.net/TzzxZ/1/

Answer 2

在2020年，您（仍然）无法控制hide（）函数按比例缩小元素的位置/方式。但是，这是我最近对类似情况进行排序的方式：

• html：我将要隐藏的元素包装在一个容器中
• html：我插入了两个额外的div，一个在前面，一个在后面
• css：我制作了要显示的容器：flex
• css：要隐藏的元素具有flex-shrink：2
• css：两个额外的div（左右）分别具有flex-grow：1

html标记看起来像这样

<div class='intro'>
  <div class='buffer'>
  <div>
  <div class='text_container'>
    Lorem ipsum, ...
  <div>
  <div class='buffer'>
  <div>
</div>

css看起来像这样

div.intro {
  display: flex;

  div.text_container {
    flex-shrink: 2;
  }
  div.buffer {
    flex-grow: 1;
  }
}

JQuery现在可用于将元素“朝中心”隐藏；即：该元素看起来好像保留在中间。

$('.text_container').hide(1000);

作为旁注，您可能想根据支持要求检查是否采用了弹性框https://caniuse.com/#feat=flexbox简而言之，在撰写本文时：不是10之前的IE，12.1之前的Opera，12.1之前的Opera mobile去上班; IE11具有粗略的支持。

哦，谢谢你2020，你真可爱！