javascript - 延迟显示更改为无

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/