现在这行得通,我只是想使它生效,因此对于所有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翻转:https://nnattawat.github.io/flip/
最佳答案
翻转似乎以恒定速度(默认为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);
});