Animate et changement de couleur du texte

Invité · 25/03/2013, 20h40

Bonjour,
Au passage de la souris sur une zone je donne un effet de mouvement a une image et je fait changer la couleur du texte.

Mais pour que le texte change de couleur j'ai l'impression qu'il faut utiliser JqueryUI.

Est il possible de faire de même sans utiliser Jquery UI, juste avec Jquery ?

**Lorenzo77** · 25/03/2013, 20h54

salut,

tu as juste a changer l'attribut CSS "color" :

Code :

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

$('cible').css('color', 'infrarouge');

**Bovino** · 25/03/2013, 21h29

Non... pas vraiment.
Seules les propriétés CSS ayant des valeurs numériques peuvent être animées.

Envoyé par Doc jQuery

All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality

Invité · 25/03/2013, 21h32

Ok merci, mais cette technique fonctionne comme un :hover en css.
Je cherchai a avoir un petit fondu comme avec animate.

**SpaceFrog** · 25/03/2013, 22h18

il existe des plugins jquery pour animer les couleurs ...
en voici un
http://www.bitstorm.org/jquery/color-animation/

**Lorenzo77** · 25/03/2013, 22h45

Envoyé par Bovino

Non... pas vraiment.
Seules les propriétés CSS ayant des valeurs numériques peuvent être animées.

tu oublies la propriété "step"

http://api.jquery.com/animate/

mais sinon christobale a raison, utiliser UI sera beaucoup + simple si c'est vraiment une animation de couleur qu'il recherche !

**danielhagnoul** · 25/03/2013, 23h58

Bonsoir

Le plugin "officiel" : "http://code.jquery.com/color/jquery.color-2.1.1.min.js"

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
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0">
	<meta name="author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js"></script>
	<script>
		"use strict";
 
		head.js( 
			"http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js", 
			"http://code.jquery.com/jquery-1.9.1.min.js",
			"http://code.jquery.com/color/jquery.color-2.1.1.min.js",
			"http://danielhagnoul.developpez.com/lib/dvjh/base.js",
			function(){
 
				$( function(){
 
					$(".story")
						.animate({ width: "+=80%" }, { queue: false, duration: 8000 })
						.animate({ backgroundColor: "orange" }, 1000)
						.animate({ backgroundColor: "yellow" }, 1000)
						.animate({ backgroundColor: "green" }, 1000)
						.animate({ backgroundColor: "blue" }, 1000)
						.animate({ backgroundColor: "green" }, 1000)
						.animate({ backgroundColor: "yellow" }, 1000)
						.animate({ backgroundColor: "orange" }, 1000);
 
				});
 
			}
		);
	</script>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<style>
		/* TEST -- Nota bene : ici 1 rem est égal à 1 px, voir dvjhRemBase.css */
		div.story {
			width:100px;
			margin:12px;
			height:12px;
			border:1px solid blue;
			background-color:#FFFFFF;
		}
 
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Forum jQuery</h1>
			<h2>
				<a href="">Lien</a>
			</h2>
		</hgroup>
	</header>
	<section class="conteneur">
 
		<div class="story"></div>
 
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2013-03-25T23:55:22.956+01:00" pubdate>2013-03-25T23:55:22.956+01:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
</body>
</html>

Animate et changement de couleur du texte

jQuery

Discussions similaires

Partager

Partager