如何使用jQuery准确显示/隐藏div？

Question

我正在开展一个迷你项目，在那里我采访了简短的GIF动画。我需要让人们看到GIF 10秒钟，并且用我的代码，我意识到计时器是不准确的。

我四处搜索并在Sitepoint article by James Edwards找到了修复程序。然而它在Javascript中我一直在尝试将JS和Jquery结合在一起，但根本没有成功。

下面

$(function() {
    //when showing image
    setTimeout(function() {
        $("#div2").fadeOut(0);
    }, 10000) //edit timer

    $('#btnclick').click(function() {
        $('#div2').show();
        setTimeout(function() {
            $("#div2").fadeOut(0);
        }, 10000)
        $('#div3').delay(10000).fadeIn(0);  //show interview
    })  
})

代码工作正常，但我想实现Sitepoint上描述的自我调整机制。有没有人以前做过这个或知道我怎么做？

HTML在这里：

<div id="div1" class="div1"> 
    <!--Show image button-->
    <center>
        <input type="button" id="btnclick" value="Show me Image" />        
    </center>
</div>
<div id="div2" class="main" style="display:none;"> 
    <!--Image-->
    <img src="timer.gif"/>
</div>
<div id="div3" class="main" style="display:none;"> 
    <!--Form-->
    <form> >
    </form>

提前致谢。

Answer 1

在jQuery中，您只需使用：

 $('#myDiv').show();
 $('#myDiv').hide();

我相信你的fadeIn(0)也应该工作但是fadeIn和fadeOut正在做动画，而你给它的参数是超过0毫秒，所以它立即做到但仍然需要做动画（这对你的程序速度不利）。如果您想要优化，最好的方法是创建一个这样的css类：

 .is-hidden{
     display: none;
  }

然后在jQuery中执行此操作

$('#myDiv').toggleClass('is-hidden');

Answer 2

这篇文章中有很多问题，所以我会尝试一次解决这些问题。

jQuery是JavaScript

作为一个注释，jQuery是一个用JavaScript构建的库，所以它只是提供方便的方法。

使用.hide()和.show()

您可能注意到的不准确之处可能与计时器关闭的事实无关。几毫秒会对你产生影响吗？当您设置超时时，您会尝试立即淡出元素，但这不会发生。在10秒超时后，它会调用淡入淡出，这需要时间。使用.hide()和.show()来隐藏和显示元素可能会更快。

.delay(10000)与setTimeout( function (){}, 10000)

相同

这两套是相当的：

$('#div2').delay(10000).show();

setTimeout( function () {
  $('#div2').show();
}, 10000);

唯一不同的是你正在使用计时器的jQuery包装器。可能存在细微的差异（必须阅读源代码），但它们应该大致相同。

自我调整定时器情况不同？

您的情况与您正在查看的自我调整计时器示例略有不同。在该示例中，它是一个动画，它在一个具有更多粒度的间隔上不断运行更短的任务，因此有更多的时间集用于根据趋势调整超时。如果您每10秒测量一次，如果用户没有创建大量样本供您查看，则差异可能微不足道。在我看来，你可以更好地提供尽可能快的代码。人们可以这样做是直接的JavaScript显示和隐藏div。

var div2 = document.getElementById(id);
// hide
div2.style.display = 'none';
// show
div2

.style.display = 'block';