Изменение цвета фона

Question

У меня есть страница с фоном, который оформлен в виде диагональных линий. Я хочу, чтобы цвет этих строк изменялся с помощью jQuery медленно и исчезал по мере их изменения. Это возможно?

Я начал скрипку с CSS в ней, чтобы отобразить фон как статический. http://jsfiddle.net/rabelais/LZc7m/

и вот код

body { 
    background-image: -webkit-gradient(linear, right bottom, left top, color-stop(0, #fff), color-stop(0.25, #fff), color-stop(0.25, #9CC), color-stop(0.5, #9CC), color-stop(0.5, #fff), color-stop(0.75, #fff), color-stop(0.75, #9CC)); 
    background-image: -webkit-linear-gradient(right bottom, #fff 0%, #fff 25%, #9CC 25%, #9CCb 50%, #fff 50%, #fff 75%, #9CC 75%); 
    background-image: -moz-linear-gradient(right bottom, #fff 0%, #fff 25%, #9CC 25%, #9CC 50%, #fff 50%, #fff 75%, #9cc 75%); 
    background-image: -ms-linear-gradient(right bottom, #fff 0%, #fff 25%, #bbb 25%, #bbb 50%, #fff 50%, #fff 75%, #bbb 75%); 
    background-image: -o-linear-gradient(right bottom, #fff 0%, #fff 25%, #9CC 25%, #9CC 50%, #fff 50%, #fff 75%, #9CC 75%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#9CC',GradientType=0);/IE6-8 */ 
    background-image: linear-gradient(right bottom, #fff 0%, #fff 25%, #9CC 25%, #9CC 50%, #fff 50%, #fff 75%, #9CC 75%); 
    background-size: 5px 5px; 
    width:100%; 
    height:100%; 
} 

Answer 1

Вы можете сделать фоновое изображение GIF, PNG или предпочтительно, если вы можете позволить себе дополнительный размер, и использовать прозрачность. У вашего изображения будут белые и прозрачные полосы. Затем, когда фоновое изображение накладывается поверх фона, вы можете анимировать цвет фона. Эффект будет изменяться цветом линий.

Answer 2

Я рекомендую использовать css3-переходы вместо jQuery. Переключить классы с помощью jQuery и установить фоновый градиент в отдельном файле css.

Пример:

.defaultClass{ 
    -webkit-transition: color 0.3s; 
    -moz-transition: color 0.3s; 
    -ms-transition: color 0.3s; 
    -o-transition: color 0.3s; 
    transition: color 0.3s; 
} 

.blue{ 
    background-color: blue; 
} 

.red{ 
    background-color: red; 
} 

Добавлен синий класс к элементу сделает его исчезать слишком синим в 0,3 секунды.

Вот скрипку для него: http://jsfiddle.net/Rudi91/sttdL/

EDIT: Самый большой плюс с этим является то, что JQuery анимации может работать медленно на мобильных телефонах/таблетки, тогда как CSS3 анимации обычно работают плавную

Answer 3

здание на rgbflawed ответ .. вам понадобится Color Animation JS

вот JSfiddle example

$(document).ready(function() { 
    $('html, body').click(function() { 
     $('body').stop().animate({ backgroundColor: '#ff0000' }, 1200); 
     $('body').delay(1200).animate({ backgroundColor: '#ffffff' }, 1200); 
    }); 

}); 

CSS

body { 
    background-image: url(http://i.stack.imgur.com/V3pEr.png); 
    background-color: #12877f; 
} 

обновление, here исчезать на белом

Answer 4

Я разработал легкий JQuery плагин (~ 3KB), который использует CSS3 переходы сделать то, что вы ищете - ColorRotator.js

Вы можете использовать его для перехода к различным свойствам цвета CSS, таким как цвет фона, цвет теней и цвета текста. Дополнительные свойства будут поддерживаться в будущем.

Пример:

$('#element').colorRotator({ 
    colors: ['#1abc9c','#16a085','#2ecc71','#27ae60'], 
    property: 'background' 
}); 

Вот несколько live demos