Hide CSS Element Without Changing Display Property

This question already has an answer here:

Equivalent of jQuery .hide() to set visibility: hidden 4 answers

---

There are several ways. Either you can make the element position: absolute or position: fixed so it doesn't take up any room and then use any of visibility: hidden , opacity: 0 , etc. One thing you'd need to look out for is that if they don't have display: none , they can still receive click events, so use pointer-events: none to stop that.

My preferred combination:

#myElement {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

And then when you want to show it:

$("#myElement").css({
  'position': 'static',
  'opacity': 1,
  'pointer-events': 'all'
})

The bonus here is that you can transition the opacity, as opposed to visibility or display .

---

display:none; is definitely the way to go, unless I'm misunderstanding your question. If your issue is that .show() switches it to display:block; then just use jQuery to add a class to the element instead.

setTimeout(function() {
  $('table').addClass('visible');
}, 2000);

table {
  display:none;
}
  table.visible {
    display:table;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr><td>Test</td><td>Test</td></tr>
  <tr><td>Test</td><td>Test</td></tr>
  <tr><td>Test</td><td>Test</td></tr>
  <tr><td>Test</td><td>Test</td></tr>
</table>

---

How long do you want to hide your element for?

There are various ways to do this, you can set a cookie in your browser or you can use a Javascript function such as setTimeout to display an element after a fixed period of time.

setTimeout( function() {
   $("#your_element").show();
   }, 5000); // Time in milliseconds

链接地址: http://www.djcxy.com/p/83558.html

上一篇: Javascript相当于Jquery的隐藏和显示

下一篇: 隐藏CSS元素而不更改显示属性