当前位置：文江博客话题详情

使元素“隐藏”朝向它的中心？

发布于 2024-12-01 07:43:55 字数 182 浏览 1 评论 0原文

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

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

它总是“折叠”到div 的左上角。有什么办法可以让它向中心折叠吗？（在我所说的情况下，div 配置为“position:absolute;”）

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

疯狂的代价 2024-12-08 07:43:55

jQuery UI 有一个“缩放”效果，这可能就是你想要的：
http://jqueryui.com/demos/hide/

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

回复收藏 0 原文

嗼ふ静 2024-12-08 07:43:55

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

附带说明一下，您可能需要根据您的支持要求检查 Flex Box 的采用情况 https://caniuse.com/ #feat=flexbox 简而言之，在撰写本文时：IE 10 之前的版本、Opera 12.1 之前的版本、Opera mobile 12.1 之前的版本都无法运行； IE11 的支持很粗略。

噢，谢谢你2020，你真的很可爱！

In 2020 you (still) cannot control where/how the element is scaled down by the hide() function. However, this is how I sorted a similar situation recently:

html: I wrapped the to-be-hiding-element in a container
html: I inserted two extra div, one before, one after
css: I made the container to display:flex
css: the to-be-hiding element has flex-shrink:2
css: the two extra div (left and right) each have flex-grow:1

The html markup looks like this

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

The css looks like this

div.intro {
  display: flex;

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

JQuery can now be used to hide the element "towards the center"; ie: the element looks as if it was remaining in the middle.

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

As a side note, you might want to check flex box adoption against your support requirements https://caniuse.com/#feat=flexbox In short at the moment of writing this: IE before 10, Opera before 12.1, Opera mobile before 12.1 all aren't going to work; IE11 has a sketchy support.

Oh thank you 2020, you are really sweet!

回复收藏 0 原文

~没有更多了~