Изменить цвет фона CSS с помощью таймера JQuery - PullRequest
Новая
       32

Изменить цвет фона CSS с помощью таймера JQuery

3 голосов
/ 09 августа 2011

Я надеялся, что кто-нибудь покажет мне эффективный JQuery для анимации между 4 цветами фона в классе div.

Я бы хотел, чтобы эти события запускались по времени, а не по щелчку или зависанию.Я видел сообщения о зависании и переключении, но как человек, не очень опытный в JQuery, я не чувствовал себя комфортно, копируя и вставляя части здесь и там.

Спасибо

Ответы [ 2 ]

7 голосов
/ 09 августа 2011

Я не знаю, имеете ли вы в виду анимированные, как при переходе к следующему, но вот простой быстрый пример изменения цвета каждые 2 секунды. Первый пример не требует jQuery.

Демонстрация в реальном времени 

function changeColor(curNumber){
    curNumber++;

    if(curNumber > 4){
        curNumber = 1;
    }
    document.body.setAttribute('class', 'color' + curNumber);
    setTimeout(function(){changeColor(curNumber)}, 2000);  
}

changeColor(0);

Обновление анимации цвета

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

Демо 2 

function changeColor(element, curNumber){
    curNumber++;

    if(curNumber > 4){
        curNumber = 1;
    }

    element.addClass('color' + curNumber, 1000);

    // So previous classes get removed.
    element.attr('class', 'color' + curNumber);

    setTimeout(function(){changeColor(element, curNumber)}, 2000);  
}

changeColor($('#testElement'), 0);
1 голос
/ 09 августа 2011

ОБНОВЛЕНИЕ

Я уверен, что есть лучшие способы сделать это, но просто чтобы показать вам простой способ сделать это ...

http://jsfiddle.net/UnsungHero97/QLPbW/5/

Вы хотите использовать функцию window.setInterval () ... 

window.setInterval(rotateBG, 1000); // 1000 = 1 second

function rotateBG() {
    // logic to rotate background
}

Надеюсь, это поможет.

...