延迟将显示更改为无显示

Question

我有一个仅更改hidden属性的脚本。该脚本可以正常工作，但是将display更改为block时，该元素显示在屏幕的错误部分，并在4秒钟的延迟后跳至正确的位置。 这是我正在使用的脚本：

  var form = document.getElementById('it-main');
if(form){
  form.style.display = 'block';
}

var caption = document.getElementById('it-main-start-caption');
if(caption){
  caption.style.display = 'none';
}

HTML代码：

<div id="it-main-start-caption" class="it-test-start-caption">
<h5 style="text-align:center;">
some title<i class="icon-left"></i>
</h5>
</div>
<div id="it-main" class="it-main" style="display:none;"></div>

CSS代码：

    .it-main {
  direction: ltr;
  font-family: 'Tahoma';
}
div.it-test-start-caption {
  text-align: center;
  padding-top: 200px;
}

这些是可以更好地了解情况的屏幕截图：

1-执行脚本之前：

2-执行完后（黄线显示元素在拧紧的位置）：

3- 4秒后：

我尝试过Chrome，Firefox和Edge，它们都表现出相同的行为。我该如何解决？

我正在wordpress网站上使用它。

Answer 1

嗯，您可以尝试以下操作： 这将在4秒内显示隐藏字段

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="hide" style="visibility:hidden">hidden</div>

setTimeout(function() {
  $('#hide').css('visibility','visible')
}, 4000);

jsfiddle链接

https://jsfiddle.net/dupinderdhiman/5610k7ad/1/