Comment passer des objects d’options en tant que parameters d’une méthode définie sur le second paramètre de jQuery ()?

À jQuery () :

Important: Si le deuxième argument est passé, la chaîne HTML du premier argument doit représenter un élément simple sans atsortingbut. À partir de jQuery 1.4 , tout type d’événement peut être passé et les méthodes jQuery suivantes peuvent être appelées: val , css , html , texte , données , largeur , hauteur ou offset .

A partir de jQuery 1.8 , toute méthode d’instance jQuery (une méthode de jQuery.fn) peut être utilisée en tant que propriété de l’object transmis au deuxième paramètre:

Lors du passage de animate tant que propriété, l’élément apparaît pour définir immédiatement les propriétés css .

 var div = $("
", { id: "foo", "class": "a", animate: { fontSize:"22px" }, data: { fontSize: "12px" }, text: "click", on: { "click": function(e) { $(this).css($(this).data()) } } }); $("body").append(div);

Tentative de définir la duration de l’ animate deux manières

  animate: {fontSize:"22px", duration:5000}

qui ne semble pas reconnaître la propriété duration , et

  animate: {fontSize:"22px", {duration:5000}}

qui enregistre Uncaught SyntaxError: Unexpected token { erreur sur la console .

Lors de la définition de css:{transition: font-size 5s} renvoie les résultats attendus

 var div = $("
", { id: "foo", "class": "a", animate: { fontSize:"22px"}, data: { fontSize: "12px" }, css:{ transition: "font-size 5s" }, text: "click", on: { "click": function(e) { $(this).css($(this).data()) } } }); $("body").append(div);

il devrait être possible de passer l’object options directement à la méthode animate .

Question:

Comment transmettre des propriétés supplémentaires à animate ou d’autres méthodes jQuery acceptant plusieurs propriétés d’object en tant que parameters; Par exemple, la duration ou l’ step de la méthode .animate() définie au deuxième paramètre de jQuery() ?

La durée par défaut de la méthode animate est 400ms. Et si vous exécutez le premier extrait que vous avez posté, vous verrez que le CSS est animé pour cette courte période (0.4s).

Cependant, une valeur spécifique pour la durée ne peut être transmise que par le deuxième argument à animer dans toutes les signatures de méthode jQuery disponibles.

jQuery ne prend pas en charge la transmission de plus d’un argument aux fonctions spécifiées en tant que propriétés dans l’object brut qui est passé en tant que second argument à jQuery () .

Cela peut être vu à partir de cet extrait de code provenant des sources de jQuery v1.12.0 , près de la ligne 2912:

 // HANDLE: $(html, props) if ( rsingleTag.test( match[ 1 ] ) && jQuery.isPlainObject( context ) ) { for ( match in context ) { // Properties of context are called as methods if possible if ( jQuery.isFunction( this[ match ] ) ) { this[ match ]( context[ match ] ); // <------------- // ...and otherwise set as attributes } else { this.attr( match, context[ match ] ); } } }

Il n’ya donc aucun moyen de passer une durée à .animate de cette manière, et donc, dans le cas de .animate , la durée par défaut de 400 ms s’appliquera.

Solution de contournement 1: remplacer la valeur par défaut

Il y a bien sûr la possibilité de changer la durée par défaut à la durée souhaitée et de la restaurer juste après l'appel $(html, plainobject) :

 $.fx.speeds._default = 5000; // change default var div = $("
", { animate: { fontSize:"100px", }, text: "animated text", }); $.fx.speeds._default = 400; // restore; $("body").append(div);