如何脈衝HTML元素

我試圖在鼠標懸停在元素上時使用while循環來脈衝（淡出/淡入淡出）HTML元素，但當觸發.hover（）事件時網頁不斷崩潰。我似乎無法識別我的代碼中的錯誤。任何幫助或替代建議將不勝感激。代碼如下：如何脈衝HTML元素

function pulse(selector) { 
    var pulsing = true; 
    while(pulsing) { 
     $.when(
      $(selector)fadeOut(1000), 
      $(selector)fadeIn(1000) 
     ).done(function() { 
      if(!$(selector).is(":hover")) { 
       pulsing = false; 
      } 
     }); 
    } 
}

來源

2014-06-12 Nic Gaudio

我想fadeIn/fadeOut調用並行運行並導致無限循環（我是否足夠透明？沒有！我不夠透明嗎？沒有！）。你需要連續運行它們。 – joews

不是一個普通的CSS動畫是否足夠？ –

，而像這樣的循環你真的不能用 - 我認爲它會「太快」對於那些衰趕上和過載的瀏覽器。總的來說（這是我第一次遇到來自其他語言的JS時被誤解的東西），您無法像使用其他語言一樣在循環方面考慮JavaScript中的動畫效果。不要在切線上脫節，但對於在頁面運行時需要不斷更新/「循環」的事情，請使用setInterval（）。

在這種情況下，我認爲最好的/最簡單的事情可能是使用了這樣的CSS動畫，但顯然老版本的IE瀏覽器將不支持它：

@keyframes pulse { 
    0% { opacity: 1; } 
    50% { opacity: 0; } 
100% { opacity: 1; } 
} 

@-webkit-keyframes pulse { 
    0% { opacity: 1; } 
    50% { opacity: 0; } 
100% { opacity: 1; } 
} 

.selector { 
    /*-- whatever --*/ 
} 

.selector:hover { 
    animation: pulse 0.5s infinite; 
    -webkit-animation: pulse 0.5s infinite; 
}

這裏，作爲一個小提琴： http://jsfiddle.net/2Wbx2/

來源

2014-06-12 22:28:31

非常好，謝謝！是的，我只是進入網絡的東西，背景主要是硬件。是一個有趣的節奏變化。感謝您的幫助和見解！ –

沒問題！是的，當我第一次來到JS時，我也嘗試過使用這樣的循環，因爲在很多語言中，您需要一個循環來運行「實時更新」事件。如果這確實有效解決問題，你能繼續並將其標記爲已解決嗎？謝謝！ –

如何脈衝HTML元素

回答

相關問題