javascript - 延迟将显示更改为无

问题描述

我有一个简单地更改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 网站上使用它。

标签： javascripthtmlcss

嗯，你可以试试这个：这将在 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/

javascript - 延迟将显示更改为无

问题描述

解决方案

推荐阅读