How to keep an element hidden, let it occupy its space and make it appear at that position?

StackOverflow https://stackoverflow.com/questions/21495507

  •  05-10-2022
  •  | 
  •  

Вопрос

I was learning jQuery from a website and stumbled upon an example demonstrating fadeIn() & fadeOut() . How can i make the "visibility:hidden" elements appear or "display:none" elements to take up their original space while they are hidden?

<script>
  $(document).ready(function(){
  $("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeOut(3000); 
 });
 });
</script>
</head>

<body>
  <p>Demonstrate fadeIn() with different parameters.</p>
  <button>Click to fade in boxes</button>
  <br><br>
  <div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>
  <br>
  <div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div>
  <br>
  <div id="div3" style="width:80px;height:80px;background-color:blue;"></div>`
Это было полезно?

Решение 4

You just need to add a parent <div> to all the divs to hold the position…

Check this fiddle… Don't know if it is what you want…

DEMO

Другие советы

You need to use visibility : visible|hidden

For fade effect you can change opacity -

.animate({opacity:1}); // 0 to make it invisible and 1 to make it visible.

Animate ---> http://api.jquery.com/animate/

Use visibility: hidden to begin, and when you're ready to display them, set the css to visibility: visible

You want visibility:hidden; to hide the element but still have it in place.

http://jsfiddle.net/EbbUh/

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top