CODEWITHSUNDEEP
jqueryhtmlcssvisibility
abhilashLenka
abhilashLenka

Reputation: 101

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

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>`

Upvotes: 1

Views: 2069

Answers (4)

Bhaskar Melkani
Bhaskar Melkani

Reputation: 331

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

Upvotes: 0

Adil Shaikh
Adil Shaikh

Reputation: 44740

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/

Upvotes: 2

Adam Merrifield
Adam Merrifield

Reputation: 10407

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

http://jsfiddle.net/EbbUh/

Upvotes: 1

helion3
helion3

Reputation: 37361

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

Upvotes: 1

Related Questions