動畫邊框顏色

我有一個黑色邊框的元素，我想讓它成爲「脈衝」。我接近.animate()，但我似乎無法得到我想要的結果。我做了一個小提琴，但由於某種原因，沒有任何工作，但在我的開發動畫工作最初。邊框被設置爲透明，就是這樣。 Here是小提琴。由於動畫邊框顏色

來源

2013-06-18 LouieV

你一直寫'bordeColor' ... –

燈閃爍可能會引發癲癇發作，如果它是太快 –

動畫將去大約一分鐘，然後生病明確的間隔 – LouieV

您需要爲IE瀏覽border-top-color/left/right/bottom - 邊框顏色也會返回rgb顏色代碼。你需要的最後一件事是包含jQuery UI。

$(document).ready(function(){ 
    var interval = setInterval(function() { 
     var $el = $('#live-feed-wrapper div:first-child'); 
     // if not black then make black 
     if ($el.css('border-top-color').replace(/\s/g,'') != 'rgb(0,0,0)') { 
     $el.animate({'borderColor': 'black'}); 
     } 
     else { 
     $el.animate({'borderColor': 'transparent'}); 
     } 
    },500); 
});

http://jsfiddle.net/QM9QT/

來源

2013-06-18 16:01:20

並且這在IE7中也能正常工作 –

對於彩色動畫您需要使用jQueryUi或color plugin

var $el = $('#live-feed-wrapper div:first-child'); 
var interval = setInterval(function() { 
    if ($el.data('toggle')) { 
     $el.animate({ 
      'borderColor': 'black' 
     }); 
     $el.data('toggle', false); 
    } else { 
     $el.animate({ 
      'borderColor': 'transparent' 
     }); 
     $el.data('toggle', true); 
    } 
}, 500);

演示-->http://jsfiddle.net/dSh97/8/

來源

2013-06-18 15:36:09

這是什麼發生在我的網站上。像你的演示一樣，它不會產生脈衝。 – LouieV

@LouieV查看此工作演示'--->'http://jsfiddle.net/dSh97/8/ –

非常聰明......'數據'甚至沒有超越我的想法 – LouieV

無需jQuery的，純CSS工作得很好：

#live-feed-wrapper div:first-child { 
    animation: pulse 0.5s linear infinite alternate; 
    -webkit-animation: pulse 0.5s linear infinite alternate; 
} 
@keyframes pulse { 
    from {border-color:black} 
    to {border-color:transparent} 
} 
@-webkit-keyframes pulse { 
    from {border-color:black} 
    to {border-color:transparent} 
}

Demo

來源

2013-06-18 15:37:49

在IE <10中不起作用 –

@roasted所以？這是眼睛的糖果。 –

我使用jQuery的原因是因爲我需要清除間隔。 – LouieV

動畫邊框顏色

回答

相關問題