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>

谢谢。

Answer 1

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

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

但是，这不会按预期工作。 getMilliseconds返回自第二个开始以来经过的毫秒数，例如，如果当前时间是20：18：20.430，它将返回430.您希望使用方法getTime。它返回自Unix Epoch以来的毫秒数。

由于您使用的是jQuery，而不是document.getElementById'ing，因此您可以使用更简洁的$('#id').html('...');。这给我们留下了：

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);

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);
        }

}); 

感谢您的所有评论＆amp;建议。这样，它不会卡住或不会保持图像。 我看着Felix Kling的小提琴，图像正在消失，下一张图像就出现了。我希望下一张图像融入其中。 再次感谢。