6
votes

JQuery Random Color Hover

J'utilise JQuery Color pour générer des couleurs aléatoires. Id comme ces couleurs apparaissent lorsque l'utilisateur planant sur toutes les étiquettes de boutons radio.

Suivre l'exemple sur Ce site , je pensais que je pourrais essayer: xxx

mon sélecteur de navigation ne fonctionne pas et tout reste sa couleur par défaut. Je fais évidemment buvonner cela en quelque sorte, mais je ne suis pas assez expérimenté pour comprendre ce qui ne va pas. Toute suggestion?


2 commentaires

Veuillez poster votre HTML & CSS. Il n'y a pas assez de code ici pour savoir ce qui ne va pas.


de quoi as tu besoin? Il n'y a pas de CSS sauf quel est du corps. Et le HTML n'est qu'un tas de balises d'entrée.


3 Réponses :


0
votes

Le problème principal que JQuery ne prend pas en charge l'animation des couleurs. Plus de résultats peuvent être trouvés JQuery: Animate Text Color pour le champ de saisie?


1 commentaires

Je ne pense pas qu'il ait des problèmes générant une couleur aléatoire. Il applique cette couleur avec le plugin JQuery.color qui lui donne des problèmes.



0
votes

$ ('étiquette'). Survolez code> ajoutera un événement de Mousever / Mouseout à l'étiquette. Vous le faites infiniment comme vous l'appelez à nouveau sur le spectre. Essayez cela à la place.

$('label').hover(function() {
    (function anim() {
        var hue = //hue stuff
        $(this).animate({
            color: hue
        }, 10000, function() {
            anim();
        });
    })();
}, function() {
    $( this ).animate({
         color: //original color
    }, 1000);
});


0 commentaires

16
votes

Essayez ceci:

function startAnimation(o) {
    var hue = 'rgb('
        + (Math.floor(Math.random() * 256)) + ','
        + (Math.floor(Math.random() * 256)) + ','
        + (Math.floor(Math.random() * 256)) + ')';
    $(o.currentTarget).animate( { color: hue }, 500, function() {
        startAnimation(o);
    });
}

$(document).ready(function() {
    $('label').hover(
        startAnimation,
        function() {
            $(this).stop().animate( { color: '#000' }, 500);
        }
    );
});


5 commentaires

Donc, c'est vraiment proche de ce que je veux réaliser. Mais au lieu d'être aléatoire sur chaque vol stationnaire - je veux que la couleur change de manière aléatoire tout en planant. Donc, par exemple: si une couleur change chaque seconde et que je tire pendant trois secondes, l'utilisateur doit voir trois couleurs ... Hmm je me demande ce qui se passe si je sors les arrêts


Ah ok. Donc, le plug-in jQuery Color appelle dans une fonction «transition» une couleur dans une autre. et pour continuer à changer de couleurs, cela s'appelle récursivement. J'ai laissé tomber ce script là-bas et ça marche! Mais il y a toujours quelque chose de mal parce que cela nécessite beaucoup de pouvoir de traitement et que le site stichie à chaque fois que je planche


Ouais!! Pourriez-vous me promener à travers ce que fait le code? Qu'est-ce que cela signifie pour la starganimation de passer "O" vers le bas?


La jQuery La méthode de navigation passe un objet d'événement au gestionnaire Starnimation . Il est nécessaire de sélectionner la cible actuelle.


Je trouve que l'ajout file d'attente: FALSE sur les options d'animation fonctionne beaucoup plus rapidement que l'appelant stop () , puis animer () à nouveau, par exemple $ (this) .animate ({couleur: '# 000', file d'attente: faux}, 500);