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