jQuery和CSS轉換脈衝效應

我試圖實現一種效果，當條件是我時，背景色會發生脈動。所以，我有：jQuery和CSS轉換脈衝效應

<div class="box">...</div> 

.box { 
    background-color: #fff; 
    transition: background-color 0.5s ease-out; 
} 
.box.active { 
    background-color: #ccc; 
}

所以現在我想用jQuery的添加和刪除該類幾次來創建一個背景色脈動效果。例如：

$('.box').addClass('active').delay(1000).removeClass('active').delay(1000).addClass('active');

這在理論上應該會產生脈動效應，但它不會產生脈動效應。會發生什麼是'活躍'類被添加，並且不會被刪除或再次添加。這幾乎就像第一個'removeClass'永遠不會被觸發。

我錯過了一些東西，但不知道是什麼。也許這與CSS轉換時機有關，但它們應該是彼此獨立的，對嗎？

感謝您的任何想法。

來源

2013-02-11 dmathisen

你見過這個[http://docs.jquery.com/UI/Effects/Pulsate](http://docs.jquery.com/UI/Effects/搏動）？ – Morpheus 2013-02-11 16:24:52

是的，但據我所知，這只是爲了不透明。我也想在不使用jQueryUI的情況下完成此操作。 – dmathisen 2013-02-11 16:50:44

延遲只適用於動畫，不能添加和刪除類。此外，您可以使用CSS中的關鍵幀進行脈動：

@keyframes pulse { 
    50% { background-color: #ccc } 
} 

.box { 
    animation: pulse .5s ease-out 2; 
}

來源

2013-02-11 16:25:05 moettinger

>延遲僅適用於動畫我不知道 - 謝謝！ – dmathisen 2013-02-11 16:26:54

同意，使用'animation-iteration-count'屬性是迄今爲止最簡單的解決方案;順便說一句[這是我正在放的一個演示]（http://jsfiddle.net/davidThomas/NZdVK/2/）爲我自己（現在不必要）的答案。 – 2013-02-11 16:29:33

另請參閱http://docs.jquery.com/Release:jQuery_1.2/Effects#Color_Animations以獲取更多示例代碼。 – RandomUs1r 2013-02-11 16:49:50

我想這就是你需要的一個函數，它每x秒調用一次並改變一個css屬性，see live demo。

var state = true; 
function changeColor() { 
    state = !state; 
    if(state){ 
     $("div").css("background","red"); 
    }else{ 
     $("div").css("background","blue"); 
    } 
    setTimeout(function() { 
     changeColor(); 
    }, 1000); 
} 

changeColor();

來源

2013-02-11 16:24:56 Trufa

壞主意，現在我們讓CSS做所有的努力工作 – 2015-07-08 23:54:30

嘗試使用CSS3動畫實現此效果。

@-webkit-keyframes pulsate 
{ 
     0% {background-color: #fff;} 
     50% {background: #ccc;} 
     100% {background: #fff;} 
}

然後關鍵幀應用到box元件

.box{ 
    animation: pulsate 2s infinite; 
}

http://jsfiddle.net/taltmann/jaQmz/

來源

2013-02-11 16:25:40

從技術上講，你可以沒有0％和100％狀態，因爲它們默認爲元素的原始狀態。 – moettinger 2013-02-11 16:29:08

另外，@dmathison，你指定（複述）'脈衝幾次'這個答案脈衝*無限*。 – 2013-02-11 16:30:32

@DavidThomas，對。它看起來像我可以修改爲_動畫：pulsate 2s 2; _ – dmathisen 2013-02-11 16:52:06

的delay功能實際上是僅用於動畫。添加和刪除類不是動畫，但可以使用queue方法或setTimeout函數來實現您想要的功能。

這個問題在另一個thread有很多很好的回覆，可能會爲你做一個有趣的閱讀。

來源

2013-02-11 16:25:45 Deif

基本上，如果你想讓它跳動永遠應該使用的setInterval（）我設立了一個例子，你在這裏http://jsfiddle.net/UftRT/

function pulssate() { 
if ($('.box').hasClass('active')) { 
    $('.box').removeClass('active') 
} else { 
    $('.box').addClass('active') 
} 
} 
window.setInterval(function() { pulssate(); },1000);

如果你想讓它停止只是設置一個變量的時間間隔然後調用window.clearInterval（int），像這樣 int = window.setInterval(function() { pulssate(); },1000);

來源

2013-02-11 16:33:41 mircea

jQuery和CSS轉換脈衝效應

回答

相關問題