Я упоминал функцию .setInterval () раньше. Я использовал эту функцию при создании скрипта, который (теоретически) оживляет переход цвета с помощью jQuery. Например, перейдите от белого к светло-красному к красному к темно-красному, как, например, при переходе от непрозрачности.
Начальная попытка анимации перехода цвета
Вот моя попытка. Обратите внимание, что первоначальные результаты были не очень хорошими, поэтому я больше не тратил время на их кодирование, а разместил здесь в основном для справки.
$('#input-page-url').css('border-color','rgb(255, 255, 255)'); var r = 0, g = 0, b = 0; var interval = 25; var borderWidth = 0; var animateLoop = setInterval(function() { /* exit loop if out of colour range */ if ((r+interval) > 255) { r = 255; clearInterval(animateLoop); } else { i++; r += interval; borderWidth += 0.2; } $('#input-page-url').css( { 'border-color': 'rgb('+r+','+g+','+b+')', 'border-width': borderWidth }); console.log('rgb('+r+','+g+','+b+')'); }, 100); Это своего рода пример цикла .setinterval (), который использует функцию jQuery .clearInterval () (сбросить setinterval) для сброса цвета, когда он достигает 255 RGB. Затем он использует .CSS (), чтобы изменить цвет RGB границы элемента.
Это также классный плагин, который делает что-то похожее: Highlight Fade, который создает цветовой эффект подсветки для событий.
Распространенная ошибка: ReferenceError: rgb не определен
Это происходит потому, что вам нужно заключить rgb в кавычки (помните, что rgb является действительным css! Нет необходимости конвертировать в hex).
$('#input-page-url').css('border-color','rgb(redShade, 0, 0)');