plugin colorAnimations, aléatoirement le texte reste rouge

**godmich** · 15/02/2010, 17h41

Bonjour à tous,

En fait, j'aimerais faire changer la couleur d'un texte progressivement puis le faire revenir à sa couleur initiale progressivement aussi. Une sorte de highlight mais sur un texte.

Exemple : noir -> rouge -> noir

Pour faire ça j'ai utilisé ce code :

Fichier Javascript

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function () {                                
    $('#lien').click(function () {    
        $('#test').animate({
            color: 'red'
        },500, function() {
            $(this).animate({
                color: 'black'
            },1000);
        });
    });
});

Fichier HTML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<html>
<head>
<script type="text/javascript" src="/js/jquery/jquery.js"></script>
<script type="text/javascript" src="/js/jquery/color.js"></script>
<script type="text/javascript" src="test_animate.js"></script>
</head>
<body>
<span id="test" style="font-size: 30pt ;">Test</span><br/><br/>
<a href="#" id="lien">Click</a>
</body>
</html>

Mais, j'ai un bug bizarre qui apparait aléatoirement (on va dire une fois sur trente environ). Le texte reste en rouge. J'ai essayé plein de trucs, mais ça merdoie toujours.

Si quelqu'un a une solution ça m'aiderait vraiment beaucoup, il faut vraiment que je trouve une solution pour corriger ce bug...

Merci d'avance.

**danielhagnoul** · 15/02/2010, 20h53

Bonsoir.

Vous pouvez simplifiez l'écriture :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
$("#lien").click(function(){
	$("#test")
		.animate({color: "red"}, 500)
		.animate({color: "black"}, 1000);
});

Quel script utilisez-vous pour l'animation des couleurs, jquery-colorAnimations.js ou l'effet inclus dans UI ?

**godmich** · 16/02/2010, 12h19

Bonjour,

Tout d'abord, merci pour votre réponse.
J'ai essayé l'écriture simplifiée que vous proposez mais le bug est toujours présent, malheureusement...

Sinon, j'utilise ce plugin pour l'animation des couleurs : http://plugins.jquery.com/project/color

Auriez-vous une autre idée de solution, s'il vous plait ?
Merci d'avance

**danielhagnoul** · 16/02/2010, 23h40

Bonsoir.

Vous utilisez donc le même plugin que moi. Je n'ai jamais eu de problème avec ce plugin et je ne vois pas de problème dans le bout de code que vous avez soumis à notre attention.

Un problème qui se produit aléatoirement une fois sur trente avec ce bout de code ? Excusez-moi, mais j'ai du mal à y croire.

**godmich** · 17/02/2010, 14h35

Bonjour,

Je vous invite à aller sur ce site (http://desizntech.info/demo/jQuery_color_animation/) qui utilise le même plugin et aller sur la partie "Font Color Animation with jQuery".

Si vous faites des aller-retour sur les liens pendant une petite minute vous verrez qu'aléatoirement certains liens restent en bleu turquoise (au lieu de revenir en blanc). Ce bug n'apparait que sur Firefox.

Donc, je voulais savoir si vous n'auriez pas une solution (ou une sorte de hack pour Firefox) pour pouvoir contourner ce bug.

Merci par avance. Je cherche désespérément une solution...

**danielhagnoul** · 17/02/2010, 23h45

Bonsoir.

Comme je le pensais bien, votre problème n'était pas avec ce petit bout de code, une perte de temps !

Dans Firefox 3.6, l'outil Web Developer 1.1.8 détecte plusieurs erreurs. Des erreurs CSS. Le calcul rgb provoque par intermittence des erreurs NaN. En $('.fourth a') mouseout le paramètre col est indéfini.

**godmich** · 18/02/2010, 10h40

Envoyé par danielhagnoul

Le calcul rgb provoque par intermittence des erreurs NaN.

Le problème vient peut être de là. (J'avais mis le lien uniquement à titre d'exemple)

Si vous voulez tester uniquement sur ce code. Je vous invite vers ce lien : http://www.cliic.com/animate_color.php

Je me suis permis de mettre plusieurs balises span et de changer l'événement "click" par "hover" pour que le bug soit plus facilement mis en évidence.

J'ai vraiment besoin d'une solution pour ce problème,
Merci d'avance.

**danielhagnoul** · 18/02/2010, 22h23

Bonsoir.

Avec ce dernier lien, je vois le problème !

Je viens de passer deux heures à chercher une solution sans succès.

J'ai essayé stop() dans différentes configurations, en créant des queue, en essayant $.fx.off, en créant autant de fonctions que d'id, en remplaçant hover par mouseenter plus adapté, rien ni fait !

Désolé, je n'ai pas la solution.

**godmich** · 19/02/2010, 10h07

D'abord, merci de m'avoir consacré de votre temps.

Je vais continuer à chercher un peu de mon côté, mais je désespère de trouver une solution...

Si quelqu'un a une piste, ça serait vraiment sympa.

**Macois** · 19/02/2010, 11h07

Bonjour,

Dans Firefox 3.0.7, je n'arrive pas à reproduire le pb....
Je viens d'essayer pendant 10 minutes sans succès...

**danielhagnoul** · 20/02/2010, 20h25

Bonsoir.

C'est un bug ! Il se produit plus fréquemment avec Firefox, mais il se produit aussi sous Chrome 4. IE pas testé.

Même en séparant les animations, exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8"/>
	<meta name="Author" content="Daniel Hagnoul" />
	<title>Page type</title>
	<style>
		@font-face {
		  font-family: "Bitstream Vera Serif Bold";
		  src: url("https://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
		}
		body {
			background-color:#dcdcdc;
			color:#000000;
			font-family:sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family: "Bitstream Vera Serif Bold", serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
		div#conteneur {
			width:95%;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
			font-size:0.8em;
		}		
		div#affiche {
			margin:12px;
			padding:6px;
			border:1px solid #999999;
			background-color:#FFFFFF;
			color:#000000;
		}
 
		/* TEST */
		span {
			display:block;
			font-size:2em;
			font-weight:bold;
			margin:24px;
		}
 	</style>
	<script charset="CP-1252" src="../lib/jquery-1.4.2.min.js"></script>
	<script charset="CP-1252" src="../lib/jquery-colorAnimations.js"></script>
	<script>
		$(function(){
			$("span").mouseenter(function(){
				$(this).animate({color: "#FF0000"}, 800);
			});
 
			$("span").mouseleave(function(){
				$(this).animate({color: "#000000"}, 800);
			});
		});
	</script>
</head>
<body>
	<div id="conteneur">
		<span>Test</span>
		<span>Test</span>
		<span>Test</span>
		<span>Test</span>
		<span>Test</span>
		<span>Test</span>
		<span>Test</span>
		<span>Test</span>
 	</div>
</body>  
</html>

**Macois** · 22/02/2010, 09h02

Ca y est, j'ai reproduis le bug !

Merci pour l'info !!!!

**godmich** · 22/02/2010, 11h24

Sur IE8, le bug n'apparait pas.

Quelqu'un aurait une idée ?

Quitte à devoir modifier le plugin colorAnimations, il faut que je trouve quelque chose pour corriger ce problème.

**talvins** · 27/02/2010, 16h24

Vous voulez la réponse ? Oh non, je suis timide...

Bon allez (enfin, j'espère que ça fonctionnera sur votre problème), ce plugin est mal foutu et sur Safari 4 c'est la cata absolue (et webkit en général). J'ai galéré moi aussi, jusqu'à ce que je sache qu'une version "finalisée" existe dans jQueryUI... que je n'utilise pas

Donc déjà, si vous utilisez jQueryUI, ça devrait être bon sans ce plugin.

MAIS, bien planqué, vous pouvez trouver une version récente et fonctionnelle de color animations sur github !
Tout fonctionne parfaitement pour moi. J'ai d'ailleurs ajouté borderColor dans la liste du plugin : je ne sais pas pourquoi il n'y est pas mais ça fonctionne.