Question

现在这个有效，我只是试图让所有4个元素的“flip”效果完全不同。有没有办法将它延迟一点，或者最好的结果就是在前一个完成翻转后立即做到这一点？

flip()是一个jquery插件，可以将对象翻转180度并显示它的“背面”。

这是我用来每30秒自动翻转的时间码。

<script type="text/javascript">
    $(document).ready(function () {
        $("#activitiesCard, #callStatsCard, #agentsContactedCard, #agentsSalesCard").flip({
            trigger: 'manual'
        });


        $("#activitiesCard, #callStatsCard, #agentsContactedCard, #agentsSalesCard").each(function (i) {
            var el = $(this);
            setInterval(function () {
                el.flip('toggle');
            }, 30000);
        });

    });

</script>

这样可行，但每张“卡片”都会在同一时间翻转。

JQuery Flip：https://nnattawat.github.io/flip/

Answer 1

看起来翻转以恒定速度发生（默认情况下为500毫秒），这样可以简化计算：对于i-th元素，您只需在30 sec + 500 * i启动计时器即可。诀窍是将setInterval()包裹在setTimeout()中，以便每个元素在开始其30秒间隔倒计时之前获得自己的固定延迟。

$(selector).each(function (i) {
  var el = $(this);
  setTimeout(function() {
    setInterval(function() {
      el.flip('toggle');
    }, 30000);
  }, 500 * i);
});

Answer 2

您可以使用jQuery.each（）提供的索引值作为超时函数的乘数。当然，随意玩你喜欢的算术。例如：

$("#activitiesCard, #callStatsCard, #agentsContactedCard, #agentsSalesCard").each(function (index, value) {
        var el = $(this);
        setInterval(function () {
            el.flip('toggle');
        }, 30000 + (index * 2000);
    });

Answer 3

将元素存储在一个数组中，创建一个函数，从数组中弹出每个元素并用计时器翻转它，然后在计时器函数中递归调用该函数，直到数组为空。

＆＃13;

var elements=[];

function flipElementIfAny() {
  if(elements.length > 0) {
    el = elements.shift();
    setTimeout( function() {
      $(el).css('background', '#aa0'); // simulate flip
      flipElementIfAny();
      }, 600);
  }
}

function flipElements() {
  elements=$('div').toArray();
  flipElementIfAny();
}

flipElements();

＆＃13;

  div {
    padding: 20px;
    display: inline-block;
    margin: 10px;
    background: #a0a;
    text-align: center;
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="1">1</div>
<div id="2">2</div>
<div id="3">3</div>
<div id="4">4</div>

＆＃13;

使用setInterval延迟翻转事件同时触发

3 个答案: