Changement de Couleur d'arrière-plan CSS avec Minuterie JQuery

J'espérais que quelqu'un pourrait me montrer efficace JQuery pour animer entre 4 couleurs d'arrière-plan dans une div de classe.

Je voudrais que ces événements déclenchés par le temps, pas de clic ou le vol stationnaire. J'ai vu des posts sur le vol stationnaire et de la bascule, mais comme quelqu'un de pas très compétent en JQuery, je ne me sentais pas à l'aise de copier et de coller des pièces ici et là.

Merci

OriginalL'auteur RCNeil | 2011-08-08

  1. 7

    Je ne sais pas si tu parles de l'animation comme la décoloration de la prochaine, mais voici un simple exemple rapide de changer la couleur de toutes les 2 secondes. Premier exemple ne nécessite pas de jQuery.

    Démonstration En Direct

    function changeColor(curNumber){
    curNumber++;

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

changeColor(0);

    Mise à jour de l'animation de la couleur

    Deuxième exemple nécessite Jquery UI, si vous souhaitez effectuer un fondu entre les classes ou les couleurs d'arrière-plan.

    Démo 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);
    hey, en fait, je suis tombé sur ce post en cherchant. J'en ai besoin pour animer avec JQuery, afin qu'il se fane chaque couleur dans et hors.
    découvrez ma mise à jour, vous devez unclude jquery UI pour ajouter des animations pour l'ajout de la classe, ou animer des couleurs d'arrière-plan.
    yesssssssss ce sera excellent travail! Est-il possible de répéter cette fonction?
    La fonction ci-dessus une fois lancé va se répète indéfiniment, le délai d'attente ne cesse de s'fixé à 2 secondes de sorte qu'il ne sera jamais s'arrêter, ou bien vous pouvez aussi utiliser setInterval(function(){},temps) qui va répéter, sans jamais nécessaire de réinitialiser le délai d'attente.
    ah nice. oui, ce n'était pas le faire dans la démo. Je l'ai placé à l'intérieur d'un vrai site et c'est génial de travailler! Je vous remercie beaucoup.

    OriginalL'auteur Loktar

  2. 1

    Mise à JOUR

    Je suis sûr qu'il y a de meilleures façons de le faire, mais juste pour vous montrer une façon simple de réaliser cette...

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

    Vous souhaitez utiliser le de la fenêtre.setInterval() fonction...

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

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

    J'espère que cette aide.

    merci pour votre astuce! Que serais-je la place comme la "logique de rotation arrière-plan?"
    découvrez la mise à jour!

    OriginalL'auteur Hristo