Si c'était si simple que ça, ce serait merveilleux !
Mais tes fonctions ne gèrent aucune des spécificités de chaque navigateur.

J'ai déjà tenté de faire un code équivalent il y a un moment (http://www.javascriptfr.com/codes/DOM-BUILDER-PROTOTYPE-ROCKS_47227.aspx), mais il est loin de pouvoir gérer tous les cas particuliers...

Si tu veut un code fonctionnel qui marche vraiment pour tous les cas et tous les navigateurs (IE6 compris), je te conseille de te tourner vers prototype : http://www.prototypejs.org/api/element.

Il faut installer Prism pour l'utiliser ça c'est clair ;-)

Après je ne comprend pas ta remarque : qu'est-ce que tu appelles appli ?
S'il s'agit du site web que tu consultes via Prim -> ça marche avec gmail donc pas besoin d'héberger le site localement.
S'il s'agit du raccourci sur le bureau que tu créé ça peut se déployer facilement dans le cadre d'un usage interne (intranet).
Sinon ben j'ai pas compris...

Dans tous les cas je te conseille de l'installer juste pour voir, tu verras que c'est assez facile de créer des raccourcis (appli ?).

Dans le cadre d'une utilisation pour un intranet il existe une autre solution :
Installer Prism (anciennement Xulrunner, http://labs.mozilla.com/2007/10/prism/) encore en Beta malheureusement.

Prism permet en gros d'avoir un Firefox sans bouton de navigation et de barre d'adresse.
Bien sur si c'est pour une utilisation autre qu'un intranet cela ne peut pas convenir.
Et je reviens au questionnement portant sur l'utilité de la chose.

XtremDuke : "Faut essayer d'arrêter de construire tout avec l'innerHTML. Essai de construire ton document via le DOM."
>> Je viens de refaire le DOM Builder de Prototype et j'en ai profité pour faire un petit benchmark.
Et bien à mon grand regret innerHTML et presque 10x plus rapide que la méthode DOM classique.
Et ces proportions changent beaucoup entre les différents navigateurs (Safari étant le plus rapide en DOM à ma grande surprise)

En plus des différences de performance, la méthode DOM a le désavantage de ne pas être cross-browser sans l'ajout d'un DOM Builder (encore et toujours à cause de IE, sniff...). Donc sans DOM Builder la meilleure solution reste le innerHTML, avec un DOM Builder tout dépend si l'on ajoute énormément d'élément.

PS  : je posterais mon DOM Builder et le benchmark when it's done...

Utilisation de window.setInterval au lieu de interval
>> Alors ça, aucune idée, c'est une mauvaise (ou bonne ???) habitude.
A mon avis c'est facultatif et surtout je trouve que ça n'apporte pas grand chose au niveau de la lisibilité.
En revanche si tu souhaites remplacer la fonction alert par une méthode perso, ça me parait intéressant.
(En gros pour l'appel je ne m'en sers pas, mais pour la redéfinition je m'en sers)

>> tu n'as pas écris de classe mais deux objets.
Pourquoi deux objets ? -> ya une fonction (animate, qui créé un objet) et une définition de classe (Animation).
Animation est bien une classe vu que je l'utilise comme un constructeur.
Le problème de gestion des timers dont tu parles est également présent dans la source que tu présentes ici.
Je n'ai fait que la convertir à la mode Prototype, cependant j'ai ensuite tenté de reproduite ta démo avec cette source.
Le résultat : http://astre.henri.free.fr/creations_sandbox_mootools.php utilise les fichiers :
http://astre.henri.free.fr/js/effect.js
http://astre.henri.free.fr/js/myPrototype.js

Je serais curieux de voir comment tu as fait dans ta démo pour pouvoir comparer avec ma version.
En effet, j'ai été obligé de rajouter un Singleton Fx.Listener qui contient une liste de tous les effets appliqués à un élément.
Ya peut-être une méthode plus élégante ? Je n'ai pas pu comparer avec ta source car minified.js est assez illisible ;-)

Désolé, je n'ai pas résisté à "prototyper" ta source :

function animate() {
   new Animation("animation", {
      duration   : $('duration').value,
      transition : $('transition').value,
      amplitude  : $('nbPix').value,
      mode       : $('cssRule').value,
      initSize   : 32
   });
};

function Animation(div, options) {
   var _options    = options             || {};
   var _fps        = _options.fps        || 80;
   var _duration   = _options.duration   || 800;
   var _transition = _options.transition || "linear";
   var _amplitude  = _options.amplitude  || 180;
   var _mode       = _options.mode       || "both";
   var _initSize   = _options.initSize   || 42; //because 42 is the answer ;-)
   var _div        = $(div);

   var _interval   = 1000/_fps;
   var _nbSteps    = Math.round(_duration/_interval);

   var _mapping = [];
   for(var i=1; i<=_nbSteps; ++i)
      _mapping.push(transitions[_transition](i*_interval, _initSize, _amplitude - _initSize, _duration));

   var currentStep = 0;
   var timer = setInterval(iter, _interval);

   function iter() {
      if (_mapping[currentStep]) {
         if (_mode == 'both') {
            _div.style.height = _mapping[currentStep]+'px';
            _div.style.width  = _mapping[currentStep]+'px';
         }
         else {
            _div.style[_mode] = _mapping[currentStep]+'px';
         }
         currentStep++;
      }
      else {
         clearInterval(timer);
         return;
      }
   }
}

PS : c'est fait à la va-vite, ya peut-être quelques erreurs...
PPS : Il suffit de remplacer la fonction animate par celle-ci et d'ajouter la classe Animation.

Bravo!

Cette source me donne effectivement envie de faire mon moteur d'animation à la mootools.
C'est une très bonne base pour découvrir les effets de Robert Penner.
Cela permettra également à certain de découvrir les singletons en JS.

La version de mootools n'utilise pas exactement les mêmes équations.
En revanche, j'ai pu constaté que tu as scrupuleusement respecté la version AS de Robert Penner ;-)
Ça aurait été sympa aussi de pouvoir choisir entre les modes easeIn, easeOut et easeInOut.
La version de mootools est beaucoup plus simple pour cela par rapport aux équations fournies par Robert Penner.

Commentaires sur le code :
var step = Math.abs(32 - $('nbPix').value)/nbSteps;  -> tu ne te sers pas de cette variable.
window.setInterval et window.clearInterval -> pourquoi tu spécifies window ? je suppose que tu n'utilises pas window.alert...
corps de animate() -> j'aurais bien vu une version objet à la place (du genre : new Animate("animation", {duration: 800, type: linear}); )

Zut, faut que je m'abstienne de répondre aussi ?

Pour le XMLHttpRequest() : cela ne privilégie en rien IE7.
L'idée est que sous IE7 il y a à la fois l'objet natif et la version ActiveX (pour des raisons de rétrocompatibilité).
Donc une bonne pratique consiste à tester d'abord la présence d'un objet natif puis de la version ActiveX.
Car il se peut que, dans des versions ultérieures, IE ne supporte plus la version ActiveX.
Cela évite également à tous les autres navigateurs de tester une instanciation avec un ActiveX.
Il en va de même pour les méthodes addEventListener et attachEvent (de manière générale on teste les propriétés "W3C" puis les propriétés IE).

La méthode d'évaluation du script : il faut effectivement masquer ce div mais il y a autre chose.
A chaque fois que tu fais un appel ajax avec du js tu remplis ce div (et écrase son contenu).
Mais tu attaches également des éléments scripts au niveau du head de la page.
Donc si on utilise ce script avec un setInterval (comme un Ajax.PeriodicalUpdater) on se retrouve assez vite avec DOM encombré...
Dans Prototype la méthode evalScript possède des limitations que ta méthode n'a pas (définition de fonction supporté de manière détourné).
Cependant la méthode de Prototype effectue un eval du contenu de chaque balise script et ne les attachent pas au DOM de la page.
Voila pourquoi je disais que ta méthode a tendance à encombrer le DOM...

Les options facultatives : jette un coup d'oeil à ma Classe Ajax et tu verras que c'est facile à mettre en oeuvre.
Ca permet également de passer des callback facultativement (ta fonction trt pourrait ainsi être vraiment facultative).

//Voici un petit exemple de passage d'option "à la Prototype" :
function ImagePreloader(image, options) {

   var _options  = options || {}; //CAD que si options est undefined, _options vaut new Object();
   var _onLoad   = _options.onLoad   || false; //de même si _options.onLoad vaut undefined, _onLoad vaut false
   var _interval = _options.interval || 10;
   var _image    = new Image();
   var _that     = this;
   var _waiting;

   _image.src = image;

   if (_onLoad) //une fonction vaut true...
      _waiting = setInterval(checkload, _interval);

   function checkload() {
      if (_image.complete) {
         clearInterval(_waiting);
         _onLoad(_that, _image.src);
      }
   }

   this.getDim = function() {
      return { //celà retourne un nouvel objet avec deux propriétés : width et height.
         width  : _image.width,
         height : _image.height
      };
   };
}


//Utilisation de la classe ImageLoader
new ImagePreloader("img/exemple240.jpg", {
   interval : 20,
   onLoad : function(loader, image) {
      var dim = loader.getDim();
      alert(image + ' loaded ('+dim.width+'x'+dim.height+')');
   }
});

/*
//Egalement valide (ici options vaut undefined) :
new ImagePreloader("img/exemple240.jpg");

//Ou encore (ici c'est options.interval qui vaut undefined) :
new ImagePreloader("img/exemple240.jpg", {
   onLoad : function(loader, image) {
      var dim = loader.getDim();
      alert(image + ' loaded ('+dim.width+'x'+dim.height+')');
   }
});
*/

En espérant ne pas t'avoir trop dérangé avec mes remarques non constructives...

Salut,

J'adore la mise-en-page de la doc html, franchement bravo !
En ce qui concerne le code, c'est plutôt un workaround...
Et je ne vois pas vraiment l'utilité -> qui utilise encore alert ?
(console.log avec firebug et ça roule ! existe même pour IE et Opera : http://www.getfirebug.com/lite.html)


Les problèmes de charset sont souvent assez lourd à résoudre mais je ne pense pas que cela soit une solution...
A mon avis, il vaut mieux essayer de corriger le problème à la source plutôt que d'utiliser ce workaround.

@+

>>va falloir que je regarde tous ces "framework"...  un de ce jours...
Tu semblais désireux de passer à Prototype, voila pourquoi j'ai posté un lien vers ma source...
Sinon si tu tiens absolument à ce que je commente ta source, voici quelques remarques :

1.
Erreur lors de la récupération de l'objet XmlHttpRequest.
Tu testes dans l'ordre :
ActiveXObject('Microsoft.XMLHTTP') -> ActiveXObject('Msxml2.XMLHTTP') -> XMLHttpRequest()
Or il faut tester XMLHttpRequest() en premier car il est supporté par défaut par IE7.
Tu fais un alert si toutes les tentatives échouent, c'est pas très pro...

2.
En mode asynchrone (syn=true ;-) si trt n'est pas défini il doit y avoir une erreur...

3.
Si le send échoue tu fais un alert, toujours aussi pro...

4.
Ta méthode d'évaluation de script est très intéressante (Point positif de la source)
Seulement elle a la fâcheuse tendance d'encombrer le DOM ...
Essaye de remplacer le contenu de JSHtm.php par
<script type="text/javascript">
function msg(txt)
{ alert(txt); }
msg('html 1');
</script>
<h1>Hello World</h1>
<script type="text/javascript">
msg('html 2');
</script>

5.
Les options de ta fonction GAG ne sont pas réellement facultatives.
Je trouve que le passage d'option "à la prototype" est quand même beaucoup plus joli.
Cela reste une question de gout, je l'avoue...

6.
Anecdotique :
- points-virgules manquant (fin de onreadystatechange)
- les noms de variables de plus de 3 lettres sont interdits, zut j'étais pas au courant...
- commentaires un peu trop stylés...