fadeIn()、delay()和fadeOut()之间的时间差是多少？

Question

我希望计算从命令行（3）开始到结束的时间差，但是看起来我错了，因为第7行显示为零。我期望它显示6500（1500 + 3500 + 1500）。请帮忙。

sd = new Date(); 
sdm = sd.getMilliseconds();
$(imgs).eq(i).fadeIn(1500).delay(3500).fadeOut(1500);
ed = new Date(); 
edm = ed.getMilliseconds();
df = edm - sdm;
document.getElementById('df').innerHTML = df;

我提出这个问题的原因是，我正在编写一个非常简单的幻灯片，并且它没有正确地按顺序显示图像，而是跳跃式地显示。

这是我的HTML和JS代码：

    $(document).ready(
      function() {

            var i=0;
            var imgs = $('#images ul').children();
            var j = imgs.length;

            setInterval(function(){ runIt(); }, 6500);

            function runIt() {
                i = i + 1;
                if (i == j) { i=0;}

                $(imgs).eq(i).fadeIn(1500).delay(3500).fadeOut(1500);
            }

    }); 

<div id="slider">
    <ul>
        <li><img src="images/slider/s1.jpg" /></li>
        <li><img src="images/slider/s2.jpg" /></li>
        <li><img src="images/slider/s3.jpg" /></li>
        <li><img src="images/slider/s4.jpg" /></li>
    </ul>   
</div>

谢谢你。

- Isaac

---

你有阅读这些方法的jQuery文档吗？如果没有，你应该先去看一下。此外，你似乎在这里问了两个不同的问题。 - Felix Kling

只有一个问题。我提出第一个问题的原因是因为第二个问题。为了找出第二个问题的问题所在，我写了第一个问题。 - Isaac

我相信阅读 https://api.jquery.com/fadein/ 和 https://api.jquery.com/fadeout/ 将会回答你所有的问题。 - Felix Kling

我已经阅读了上述文件，但是在时间和执行顺序方面我没有找到任何信息... - Isaac

你的代码在我这里看起来运行良好：https://jsfiddle.net/dLbrh7vy/。能否提供更好的问题解释？ - Felix Kling

如果你担心它会跳过第一张图片，可以这样做：在你的 runIt() 函数中，将 i = i + 1; 移动到该函数的底部。 - Anthony

Answer 1

jQuery中调用动画函数是异步的。你需要使用回调函数，如下所示：

$(element).fadeOut(delay,
    function() {
        // callback action
    }
);

然而，这种方法并不能按预期工作。getMilliseconds返回自秒开始经过的毫秒数，例如，如果当前时间是20:18:20.430，则它将返回430。你应该使用getTime方法。它返回自Unix Epoch以来的毫秒数。

由于您正在使用jQuery，因此可以使用更简洁的$('#id').html('...');代替document.getElementById。这样我们就得到了：

sd = new Date(); 
sdm = sd.getTime();
$(imgs).eq(i).fadeIn(1500).delay(3500).fadeOut(1500,
    function() {
        ed = new Date(); 
        edm = ed.getTime();
        df = edm - sdm;
        $('#df').html(df);
    }
);

你的幻灯片可能也因此出现问题。

关于第二个片段，有一点小问题：在“var imgs = $ ('#images ul').children();”中，“.children()”方法返回一个jQuery对象。你不必再次运行它通过“$()”，但如果你认为这更清晰，也可以这样做。

imgs.eq(i).fadeIn(1500).delay(3500).fadeOut(1500);

- Midgard

Answer 2

我想我找到了答案。它在IE和Chrome中有效。我没有在FF中检查。

$(document).ready(
  function() {

        var i=0;
        var imgs = $('#images ul').children();
        var j = imgs.length;

        setInterval(function(){ runIt(); }, 5000);

        function runIt() {
            $(imgs).eq(i).fadeOut(1500)
            i = i + 1;
            if (i == j) { i=0;}
            $(imgs).eq(i).fadeIn(1500);
        }

}); 

感谢您所有的评论和建议。这样，它就不会卡住或者保留图像。 我看了Felix Kling的fiddle，图像消失了，下一个图像出现了。我希望下一个图像能够混合在一起。 再次感谢。

- Isaac