CODEWITHSUNDEEP
javascriptjquerycsshtml
alex volkow
alex volkow

Reputation: 129

Hide the element, but show for that place blank

could any body explain what I should modify, how after hiding the image, still keep the div as a blank with no content but the same width and height as it were with image,

Exact example: http://jsfiddle.net/rJuWL/1/

So after hiding, Second! comes to First!, but I need to keep it as First! blank Second!

Html

<html>
<body>
    <div>First!</div>
<div class="loading">
<img id="loading" src="http://preloaders.net/preloaders/284/preview.gif" class="none"/>
    <div>Second!</div>
</div>
</body>

Css

.none{display:none}
.loading{width: 32px;height:32px;}

Javascript

showLoading();    
function showLoading() {
  $("#loading").hide();
  $("#loading").show().delay(2500).fadeOut('10');
}

Upvotes: 1

Views: 128

Answers (2)

SeanCannon
SeanCannon

Reputation: 77956

Dont hide it with display:none, set visibility:hidden

display:none will take it out of the DOM flow. Changing the visibility to hidden will keep it there but emulate setting opacity to 0.

Here's a quick demo which keeps your fadeOut http://jsfiddle.net/AlienWebguy/5cwE7/

Upvotes: 7

Kevin B
Kevin B

Reputation: 95030

I would use opacity.

showLoading();    
function showLoading() {
  $("#loading").fadeTo(0,0);
  $("#loading").fadeTo(0,1).delay(2500).fadeTo(10,0);
}

The first 0 is the duration, the second is the opacity. 1 for show, 0 for hide.

However, your code doesn't really make sense. Why are you hiding it and then instantly showing it, then waiting 2 and a half seconds and hiding it?

I don't think the initial hide is needed (the first line of the showLoading() function in my code)

Edit:

Alternatively, you could use .css("opacity",0) in place of .fadeTo(0,0), it is more than likely more efficient.

Upvotes: 1

Related Questions