Создание зацикленной фоновой анимации в jquery

Я хочу:

когда страница загружается - фон имеет красный цвет, через 10 секунд bgColor меняется на зеленый с анимацией постепенного исчезновения... еще через 10 секунд он меняется на оранжевый.... затем снова на красный и так далее..

Может ли кто-нибудь помочь


animation jquery recurring
person Pankaj Dubey    schedule 01.03.2010    source источник
comment
Прочитав ваше описание, я не уверен, что хочу помогать кому-то создавать такую ​​мерзость! ;)   -  person Martin    schedule 02.03.2010
comment
это что-то похожее на то, что я планирую делать ....... проверить pandora.com   -  person Pankaj Dubey    schedule 02.03.2010

Ответы (1)


arrow_upward
7
arrow_downward

Используйте setinterval с обратным вызовом, который меняет фон:

$("document").ready(function() {
    var colours = [ "blue", "orange", "pink" ];
    var counter = 0;
    function cycleBackground() {
        $("body").animate({ backgroundColor: colours[counter] }, 500 );
        counter++;
        if(counter == colours.length) {
            counter = 0;
        }
    }
    setInterval(cycleBackground, 10000);
});

Вам нужно будет использовать функцию jQuery UI animate, если вы хотите плавно переключаться между цветами.

person karim79    schedule 02.03.2010
comment
Добавьте анимацию затухания, и это совершенно правильно. ( $("body").animate({ "background-color": colours[counter] }); если вы включаете плагин цветной анимации jquery) - person Joel; 02.03.2010
comment
Спасибо, Джоэл, сначала я пропустил бит «fadeIn» и «fadeOut». Я думаю, что анимация пользовательского интерфейса jQuery может отображать цвета. - person karim79; 02.03.2010