Animation background-color tableau de droite à gauche

z980x · 07/05/2011, 12h06

Bonjour à tous,

je recherche désespérément un truc pour animer certaines lignes...

Pour exprimer l'idée de "flux", d'un endroit à un autre, j'aimerais pouvoir avoir une animation sur certaines lignes de mon tableau.

Voilà ce que j'aimerais:
De droite à gauche (ou inversement), une couleur se déplace le long de la ligne. La couleur devrait être dégradée.
Un peu comme sur cette image : https://www.saydazzle.com/images/gra..._red__0301.png

Donc, par exemple, si c'est un flux entrant, cette image (ou élement en dégradé peu importe), se déplace sur ma ligne de gauche à droite et disparait.
C'est juste pour mettre en valeur la ligne à un moment donné.

Connaissez-vous un plugin pour faire ça? Ou une solution possible??

Parce que je ne trouve rien, et je ne sais pas vraiment quoi chercher sur le net.

Je vous remercie par avance, et j'espère avoir été assez clair dans ma description.

Merci !

Philippe

danielhagnoul · 07/05/2011, 22h47

Bonsoir

Animer la couleur de fond avec les effets de jQuery UI, c'est très simple. Mais ce que vous demandez, je ne sais pas.

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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/humanity/jquery-ui.css">
	<style>
		/* Base */
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {margin:0px; padding:0px; }
		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:serif; padding:6px; }
		p, div, td {word-wrap:break-word; }
		pre, code {white-space:pre-wrap; word-wrap:break-word; }
		img, input, textarea, select {max-width:100%; }
        img {border:none; }
		h1 {font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p {padding:6px; }
        ul,ol,dl {list-style:none; padding-left:6px; padding-top:6px; }
        li {padding-bottom:6px; }
		label {display:block; }
		input {width:250px; }
		input[type="button"] {width:auto; }
		input[required] {border-right:3px solid orange; }
		td {padding:3px; }
		.conteneur {width:95%; min-width:800px; min-height:400px; margin:12px auto; background-color:#FFFFFF; color:#000000; border:1px solid #666666; }
 
		/* article */
		.conteneur {border-spacing:4px; }
		.ligne {display:table-row; }
		article {display:table-cell; text-align:center; vertical-align:middle; border:1px dotted grey; }
		article:nth-of-type(1) {width:400px; height:120px; }
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<section class="conteneur">
		<section class="ligne">
			<article>
				<button id="btn">Animer la couleur de fond</button>
			</article>
		</section>
	</section>
	<footer itemscope itemtype="http://data-vocabulary.org/Person">
		<!-- Date ISO format long US : aaaa-mm-qqThh:mm:ss.nnn+hh:mm -->
		<time datetime="2011-05-07T22:50:00.000+02:00" pubdate>2011-05-07</time> <span itemprop="name">Daniel Hagnoul</span> <a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
	</footer>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.6.min.js"></script>
	<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
	<script>
		$(function(){
			$("#btn").click(function(){
				$("article").animate({ backgroundColor: "blue" }, 3000).animate({ backgroundColor: "white" }, 3000);
			});
		});
	</script>
</body>  
</html>

z980x · 08/05/2011, 18h13

Bonjour Daniel,

merci pour votre réponse et votre message.

Je connais l'effet dans l'exemple que vous m'avez donné, mais je souhaite faire un peu plus compliqué.

En fait, je voudrais "déplacer" de gauche à droite une bande de couleur, dans ma ligne.

Désolé pour l'image, mais c'est la seule qui représente l'animation que j'aimerais faire...

Sur une ligne d'un tableau, avoir une couleur en dégradé qui va de gauche à droite. (Pas de retour, juste un aller, de gauche à droite)

Any idea?

Merci !

07/05/2011, 12h06	#1
z980x Futur Membre du Club Inscription : mars 2006 Messages : 108 Détails du profil Informations forums : Inscription : mars 2006 Messages : 108 Points : 18 Points : 18	Animation background-color tableau de droite à gauche Bonjour à tous, je recherche désespérément un truc pour animer certaines lignes... Pour exprimer l'idée de "flux", d'un endroit à un autre, j'aimerais pouvoir avoir une animation sur certaines lignes de mon tableau. Voilà ce que j'aimerais: De droite à gauche (ou inversement), une couleur se déplace le long de la ligne. La couleur devrait être dégradée. Un peu comme sur cette image : https://www.saydazzle.com/images/gra..._red__0301.png Donc, par exemple, si c'est un flux entrant, cette image (ou élement en dégradé peu importe), se déplace sur ma ligne de gauche à droite et disparait. C'est juste pour mettre en valeur la ligne à un moment donné. Connaissez-vous un plugin pour faire ça? Ou une solution possible?? Parce que je ne trouve rien, et je ne sais pas vraiment quoi chercher sur le net. Je vous remercie par avance, et j'espère avoir été assez clair dans ma description. Merci ! Philippe
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email