使用CSS display时如何保持DOM中分配的空间：无

Question

I am aware of display:none and visibility:hidden functionality. Due to some reason I have to use display:none and still want to keep the space allocated for the element in DOM so that it doesn't affect other elements next to it. Is it possible?

This is a follow up question as I have pointed out the issue is because of display:none property. Link to the original question is HERE

UPDATE: As requested by TJ Crowder, I am including all the relevant details from my original question over here.

Can you tell me how can I add a nice fade effect for smoother animation to my function instead of setting visibility hidden / visible at an regular interval.

I am not looking for a plugin or add jQuery UI library.

My JS :

setBlinkingInterval: function(elem, event) {
    if (intervalIdForBlinking != 0) 
        window.clearInterval(intervalIdForBlinking);

    $(elem).show();
    intervalIdForBlinking = setInterval(function() {
       if (eventsObj.eventIsFinished(event)) {
          timer.setClosedStatus(elem, event);
       }
       else {
          if (elem.css('visibility') == 'hidden') 
             elem.css('visibility', 'visible');
         else 
             elem.css('visibility', 'hidden');
       }
   }, 500);
} 

Update 1: HTML markup in order to clarify one answer

$('<span/>')
            .append('<div id="closing_blink" class="yellowText" style="display:none;">' + closing + '&nbsp;</div>')
            .append(date.formatFullDate(new Date(event.timeUtc)) + timezone)
            .append('<br/>')
            .append((weatherInfo != '' && trackInfo != '') ? '<div class="whiteText">' + weather + '</div>' + '<div class="orangeText">' + weatherInfo + '</div>' + '&nbsp;' + '<div class="whiteText">' + track + '</div>' + '<div class="orangeText">' + trackInfo + '</div>' : '')
            .appendTo(rightTd);

So after implementing the solutions based on the provided answers I am having issues when it is displayed on the page.

Case 1: When using my original solution (It works fine)

Screen recorder link HERE

Case 2: When using fade in/out method (Display issue)

Screen recorder link HERE

Case 3: When using toggle method (Display issue)

Screen recorder link HERE

Is there any quick fix to solve the display issue?

Here is the complete HTML up generated by a JS function drawRaceHead: function(event) {

// Returning all race numbers to default values
styling.makeAllRaceNumbersUnselected();

// Make the race number active (including Racing Specials)
styling.makeCurrentEventNumberSelected(event)

// Race info
$("#raceInfo").html('');
$("#raceInfo").append($('<table/>').append($('<tr/>')))
var leftTd = $('<td style="width: 295px"/>')
        .appendTo($('#raceInfo')),
    rightTd = $('<td/>')
        .appendTo($('#raceInfo'));
// If not Racing Specials category
if (event.parentCategoryId != 2863) leftTd.html(raceFullName + '&nbsp;' + event.name)
else leftTd.html(event.name);

$('<div id="closing_time" style="display:none"/>')
    .appendTo(leftTd)

// Date, time, weather, track
var weatherInfo = '', trackInfo = '';
if (event.markets.length > 0) {
    weatherInfo = (event.markets[0].weather == null) ? '-' : event.markets[0].weather;
    trackInfo = (event.markets[0].track == null) ? '-' : event.markets[0].track;
}

var isMSIE = /*@cc_on!@*/false;
var ieVersion = (function(reg) { return isMSIE && navigator.userAgent.match(reg) ? RegExp.$1 * 1 : null; })(/MSIE\s([0-9]+[\.0-9]*)/);

if (isMSIE && ieVersion < 11) {
    timezone = '';
}
else {
    var regExp = /\(([^)]+)\)/, timezone = (regExp.exec(new Date)[1]).split(' ')[0];
    timezone = ' (' + timezone + ')';
}

$('<span/>')
    .append('<div id="closing_blink" class="yellowText" style="display:none;">' + closing + '&nbsp;</div>')
    .append(date.formatFullDate(new Date(event.timeUtc)) + timezone)
    .append('<br/>')
    .append((weatherInfo != '' && trackInfo != '') ? '<div class="whiteText">' + weather + '</div>' + '<div class="orangeText">' + weatherInfo + '</div>' + '&nbsp;' + '<div class="whiteText">' + track + '</div>' + '<div class="orangeText">' + trackInfo + '</div>' : '')
    .appendTo(rightTd);

},

Answer 1

Note: This answer has sections, based on updates from the OP.

---

Instead of display: none , use visibility: hidden . That hides the element, but the element still takes up space in the layout.

You can see the difference by comparing this jsbin using display: none with this one using visibility: hidden .

Both of those use this HTML:

<div>This is above</div>
<div id="toggleme">This is the one that toggles</div>
<div>This is below</div>

The first uses:

(function() {
  "use strict";
  var toggleme = document.getElementById("toggleme");
  setInterval(function() {
    if (toggleme.style.visibility === "hidden") {
      toggleme.style.visibility = "";
    }
    else {
      toggleme.style.visibility = "hidden";
    }
  }, 400);
});

while the second uses:

(function() {
  "use strict";
  var toggleme = document.getElementById("toggleme");
  setInterval(function() {
    if (toggleme.style.display === "none") {
      toggleme.style.display = "block";
    }
    else {
      toggleme.style.display = "none";
    }
  }, 400);
});

---

You've said in a comment below you're using fadeOut to hide the element. That will, of course, set display: none when done. As Arun points out, you can use fadeTo instead, which animates opacity down to 0 , which has a similar effect to setting visibility: hidden : Live Copy

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<meta charset=utf-8 />
<title>fadeTo</title>
</head>
<body>
<div>This is above</div>
<div id="hideme">This is the one that toggles</div>
<div>This is below</div>
  <script>
    $("#hideme").fadeTo("slow", 0);
  </script>
</body>
</html>

Another option is to use the "complete" callback on fadeOut to change display and visibility : Live Copy

$("#hideme").fadeOut(function() {
  $(this).css({
    display: "",
    visibility: "hidden"
  });
});

---

You've asked how you can apply the above to your code. The code looks overly-complex to me (not sure what the whole eventObj thing is about), but here's something I think you can readily adapt: Live Copy

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<meta charset=utf-8 />
<title>faded blinking</title>
</head>
<body>
<div>This is above</div>
<div id="toggleme">This is the one that toggles</div>
<div>This is below</div>
<input type="button" id="btnStartStop" value="Start">
  <script>
    (function() {
      var obj = {
        startBlinking: function($elem) {
          if ($elem.data("blinking")) {
            return;
          }
          $elem.data("blinking", true);
          fadeToZero();

          function fadeToZero() {
            if ($elem.data("blinking")) {
              $elem.fadeTo("slow", 0, fadeToFull);
            }
          }
          function fadeToFull() {
            if ($elem.data("blinking")) {
              $elem.fadeTo("slow", 1, fadeToZero);
            }
          }
        },
        stopBlinking: function($elem) {
          $elem.data("blinking", false);
        }
      };

      $("#btnStartStop").click(function() {
        if (this.value === "Start") {
          obj.startBlinking($("#toggleme"));
          this.value = "Stop";
        }
        else {
          obj.stopBlinking($("#toggleme"));
          this.value = "Start";
        }
      })
    })();
  </script>
</body>
</html>

Answer 2

Use css:

.hidemeplease {
    visibility:hidden;
}