延遲翻轉事件與setInterval同時發射

現在這個作品，我只是想使它成爲'flip'效果不是完全在同一時間所有4個元素。有沒有辦法讓它稍微延遲一點，或者最好的結果是在上一次完成翻轉之後立即執行它？延遲翻轉事件與setInterval同時發射

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/

來源

2016-08-19 James Wilson

能否請你添加一個鏈接到該插件。 – Andreas

它看起來像翻轉發生在一個恆定的速度（默認爲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); 
});

來源

2016-08-19 17:39:06 Tashi

這是天才！完美工作。 –

可以使用（）作爲乘數超時功能由jQuery.each提供的索引值。當然，可以隨意使用算數來滿足您的喜好。例如：

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

來源

2016-08-19 17:26:22 hellojebus

這是第一次運作，但它看起來像他的指數值不斷增加。所以第二次需要更長的時間，第三次需要更長的時間。有任何想法嗎？ –

儲存在數組中的元素，創建彈出每個元素關閉陣列，並用一個計時器將其翻轉的函數，然後遞歸調用該函數在計時器功能，直至數組爲空。

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

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

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

來源

2016-08-19 17:49:18

延遲翻轉事件與setInterval同時發射

回答

相關問題