dojo.animateProperty : Animer les Css

Salut tous le monde
pour annimer mes proprietes Css j'ai utilisée le dojo.animateProperty
voila le code

Code:

---

1 2 3 4 5 6 7

valeur = '"'+champ.attr("value")+'"'; dojo.animateProperty({ node:elementSelectionne, properties: { proprieteCss: valeur } }).play();

---

elementSelectionne : c'est l'element dont j'applique la propriete Css.
proprieteCss : c'est le nom de la propriete (ex : color, backgroundColor..).
valeur : c'est la valeur de la propriete (ex : "#d12f2f"..).
mais le style ne s'applique pas ???
et Merci

Bonjour,

Est-ce nécessaire de faire ceci ?

Code:

---

1 2	valeur = '"'+champ.attr("value")+'"';

---

Essayez plutôt ceci:

Code:

---

1 2	valeur = champ.attr("value");

---

Ensuite, essayez si le animateProperty fonctionne de manière ciblée avant de faire de manière générique:

Code:

---

1 2 3 4 5 6 7 8 9

dojo.animateProperty( { node:"monElement", properties: { width:400 //en guise de test } } ).play();

---

normalement quand je donne des proprietes statiques il marche bien, mais les variables qui marche pas :(

Que vous donniez le valeur (mais sans les " ajoutés) et le elementSelectionne, je pense que ça va. Par contre, le proprieteCss il est possible qu'il n'en veuille pas.

Faites-un test:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

var valeur = "red"; var elementSelectionne = "monElement";   dojo.animateProperty( { node:elementSelectionne , properties: { color:valeur //color de façon figée, pas une variable } } ).play();

---

oui avec le nom de propriete statique il marche, alors c'est quoi la solution ??

Il faut poser la question sur le forum Javascript tout court. Pas l'exemple Dojo, car ils vont vous renvoyer ici. Mais cet exemple ci pourrait être similaire. On déclare une structure et on précise un des noms dynamiquement:

Code:

---

1 2 3 4 5 6 7 8 9 10

var nomUn = "marque";   var voiture = { nomUn:"Peugeot", couleur:"gris metalisé" age:2003 };   alert(voiture.marque);

---

Ca ne marche pas, bien entendu. Il faudrait trouver un moyen de préciser "nomUn" dans la structure. C'est la question qu'il faut poser.


Edit: J'ai ouvert la question sur le forum Javascript ici.

Merci bien pour tes réponses.

De rien. Mais mes connaissances sont très limitées. Et mes espoirs de plus en plus maigres. Emmanuel a sans doute une réponse.

Je ne pense pas qu'on puisse adapter l'exemple, mais essayez tjs...
Il faut tatonner en attendant que qqun donne une autre réponse. Voici des exemples de tatonnements, faites-en un, puis l'autre mais pas les deux en même temps. J'ai mis les deux test dans le même code pour simplifier mon message. Supprimer une des deux lignes, puis essayez avec l'autre.

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

var monAttribut = "color"; var valeur = "red"; var elementSelectionne = "monElement";   dojo.animateProperty( { node:elementSelectionne , properties: {}   properties[monAttribut] = valeur; //test 1 } properties[monAttribut] = valeur; //test 2 ).play();

---

Merci une autre fois,
dans les 2 cas il me donne cette erreur :

Code:

---

1 2 3 4 5

Erreur*: missing ) after argument list Fichier Source*: http://localhost/MyWorkspace/....../ruban.js Ligne*: 1351, Colonne*: 1 Code Source*: alert(properties.monAttribut);

---

Je n'y crois pas du tout mais qui ne tente rien n'a rien:

Code:

---

1 2 3 4 5 6 7 8 9 10

dojo.animateProperty( { node:elementSelectionne , properties: {} })   dojo.animateProperty[properties] = {monAttribut:valeur};   dojo.animateProperty.play();

---

Salut,

Désolé pour la réponse tardive :oops:

+1 avec Vermine : la notation

Code:

---

1 2	{width : 120 }

---

n'a rien à voir avec

Code:

---

1 2 3 4

var w = "with"; ... { w : 120 }

---

C'est ici la marque d'un objet dont les attributs sont les éléments à gauche du ":" et la valeur (évaluée) est située à droite.

Pour une animation, on a cette notation (enfin pas tout à fait mais ce n'est pas grave):

Code:

---

1 2 3 4 5 6 7 8

dojo.animateProperty({ node:elementSelectionne, properties: { width: "400px"; height: "300px"; } }).play();

---

Donc si on veut passer les éléments de style par valeur, on peut utiliser le fait qu'un objet JS est en fait un tableau (pas exactement mais cela fera l'affaire ici) et faire ainsi:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

var monStyle1="width"; var monStyle2="height"; var prop ={}; prop[monStyle1]=XXXX; prop[monStyle2]=XXXX; dojo.animateProperty({ node:elementSelectionne, properties: prop }).play();

---

Ou encore plus élégant, générer une chaine de caractères au format Json et fabriquer l'objet associé :D:

Code:

---

1 2 3 4 5 6 7

var prop = '{ "width": "400px", "height":"300px" }'; dojo.animateProperty({ node:elementSelectionne, properties: dojo.fromJson(prop) }).play();

---

ERE