Как затухать фон вместо того, чтобы просто менять цвет

Question

Я стараюсь, чтобы мой фон исчезал до цветов, а не только изменений. Я также хотел бы, чтобы он повторил, если это возможно!

Я использую JQuery прямо сейчас, чтобы изменить CSS тела.

$(document).ready(function(){ 
    var bgColor = ["#FF0000", "#FF00A6", "#FF00FF"]; 
    var i = 0; 
    var bgRotate = setInterval(function(){  
     $('body').css({'backgroundColor' : bgColor[[i]]}); 
     i++; 
     }, 1000); 

    }); 

Вот fiddle.

Answer 1

Почему бы не использовать CSS3 анимации для этого с помощью @keyframes, как этот вопрос также помечены как CSS поэтому хотелось бы, чтобы опубликовать один

Все, что говорит само за себя, только об этой линии animation: demo 3s infinite linear; ничего, кроме короткой стороны 4 свойств, а именно

• animation-name
• animation-duration
• animation-iteration-count
• animation-timing-function

Здесь я использовал infinite так он держит итерации, и я использую linear для последовательной анимации.

Demo

html, body, div { 
    height: 100%; 
    width: 100%; 
} 

div { 
    -webkit-animation: demo 3s infinite linear; 
    animation: demo 3s infinite linear; 
} 

@-webkit-keyframes demo { 
    0% { 
     background: #FF0000; 
    } 
    33% { 
     background: #0f0; 
    } 
    100% { 
     background: #f0f; 
    } 
} 


@keyframes demo { 
    0% { 
     background: #FF0000; 
    } 
    33% { 
     background: #0f0; 
    } 
    100% { 
     background: #f0f; 
    } 
} 

Answer 2

Просто используйте CSS transitions. Они намного мягче, чем переходы JQuery и имеет все CSS»обычные выгоды (не требуется каскадные, не JS и т.д.)

body { transition: background-color 1s } 

Чтобы сделать это повторить, сделайте следующее:

$('body').css({'backgroundColor' : bgColor[i%bgColor.length]}); 

Это делает остаточная часть (по модулю) операции по длине массива.

Answer 3

Посмотрите на this вопрос

Использование рамки jQueryUI вы можете сделать:

$('body').animate({backgroundColor: '#FF0000'}, 'slow'); 

Answer 4

Вы можете попробовать оживить его с animate() метод JQuery .. В Давайте предположим, что у вас есть DIV с установкой CSS

#yourDiv{ 
    background-color: #FFFFFF; 
    width: 100px; 
    height: 100px; 
} 

и вы хотите анимировать его до черного цвета в течение 5 секунд после нажатия на DIV с идентификатором darkenButton. Вы можете использовать событие click:

$('#darkenButton').click(function(){ 
    $('#yourDiv').animate({ 
     background-color: '#000000' 
    }, 5000); 
}); 

Answer 5

Вы должны использовать .animate() вместо .css(). И для повторения, вы должны сделать функцию:

function changeColor(i) { 
    var bgColor = ["#FF0000", "#FF00A6", "#FF00FF"]; 
    if(i > bgColor.length) { i = 0; } 
    $('body').animate({'backgroundColor' : bgColor[[i]]}); 
    var bgRotate = setTimeout(function() {  
     changeColor(++i); 
    }, 1000); 
} 

Answer 6

вы можете сделать это с помощью CSS3 :)

@-webkit-keyframes blink { 
    0% { background:red; } 
    50% { background:green;} 
    100% { background:red; } 
} 
@-moz-keyframes blink { 
    0% { background:red; } 
    50% { background:green;} 
    100% { background:red; } 
} 
@-ms-keyframes blink { 
    0% { background:red; } 
    50% { background:green;} 
    100% { background:red; } 
} 
    body{ 
-webkit-animation: blink 1s infinite; 
-moz-animation: blink 1s infinite; 
-ms-animation:  blink 1s infinite; 
} 

Answer 7

вы можете использовать просто изменить значение var i's, когда он достигает конца array, проверить это http://jsfiddle.net/33VgU/3, это повторяет фоны бесконечно, и если изменить цвет случайно, чем использовать Math.random функцию получить значение var i.