javascript - 使用 CSS 显示 :none 时如何保留 DOM 中分配的空间

Question

我知道 display:none 和 visibility:hidden 功能。由于某种原因，我必须使用 display:none 并且仍然希望保留为 DOM 中的元素分配的空间，这样它就不会影响它旁边的其他元素。可能吗？

这是一个跟进问题，因为我已经指出问题是因为 display:none 属性。原始问题的链接是 HERE

更新:根据 T.J. 的要求Crowder，我在此处包含了我最初问题中的所有相关详细信息。

你能告诉我如何为我的函数添加漂亮的淡入淡出效果以实现更流畅的动画，而不是定期设置可见性隐藏/可见吗。

我不是在寻找插件或添加 jQuery UI 库。

我的 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);
} 

更新 1:HTML 标记以澄清一个答案

$('<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);

因此，在根据提供的答案实现解决方案后，我在页面上显示时遇到了问题。

案例 1:使用我原来的解决方案时(效果很好)

屏幕录像机链接 HERE

情况 2:使用淡入/淡出方法时(显示问题)

屏幕录像机链接 HERE

案例 3:使用切换方法时(显示问题)

屏幕录像机链接 HERE

有没有快速解决显示问题的方法？

这里是一个JS函数生成的完整的HTML updrawRaceHead:函数(事件){

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

注意:根据 OP 的更新，此答案有多个部分。

---

代替display: none，使用visibility: hidden .这会隐藏元素，但元素仍会占用布局中的空间。

对比this jsbin就能看出区别使用 display: none 和 this one使用 visibility: hidden。

两者都使用此 HTML:

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

第一个用途:

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

而第二个使用:

(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);
});

---

您在下面的评论中说过您正在使用 fadeOut 来隐藏元素。当然，这将在完成时设置 display: none。正如 Arun 指出的那样，您可以改用 fadeTo，它将 opacity 动画化为 0，这与设置 visibility 具有类似的效果: 隐藏: 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>

另一种选择是在fadeOut 上使用“complete”回调来更改display 和visibility:Live Copy

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

---

您已经询问了如何将以上内容应用到您的代码中。代码对我来说看起来过于复杂(不确定整个 eventObj 是关于什么的)，但我认为您可以轻松适应以下内容: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>