jQuery Girl
  1. jQuery Girl
  3. jquery animer avec percenteges
Intereting Posts
jQuery: Convertir l’URL du texte en lien en tapant Obtenir l’ID parent de cette DIV Le meilleur moyen de fournir des graphiques sur le Web? Bibliothèque côté serveur ou côté client? HTML5? Valider une zone de texte avec JQuery JQuery Tabs and Hyperlinking (aidez-moi à corriger mon code, s’il vous plaît) Le meilleur moyen d’accéder à un fichier JavaScript externe et de placer du contenu dans div? xsl: include et xsl: param sur Google Chrome, avec le plugin de transformation jQuery Comment changer la valeur de la sélection quand d’autres sélections sont modifiées? Détection de collision entre images pivotées à l’aide d’animations CSS jQuery plugins – est-ce une bonne pratique? détection de collision jquery pour divs Style un certain caractère dans une chaîne Comment donner casse phrase à phrases via CSS ou javascript? jQuery: Détecter un clic de souris et ouvrir la cible dans un nouvel onglet jQuery UI autocomplete étrange comportement

jquery animer avec percenteges

Existe-t-il un moyen d’animer une div en utilisant des pourcentages avec jQuery?

J’ai essayé ceux-ci: 

$('.box1').animate({width:($(".wrapper").width()*.100)},"fast");}) $('.box1').animate({width:'100%'},"fast");}) $('.box1').animate({width:100%;})

Aucune de ces solutions ne fonctionne …

des idées?

METTRE À JOUR 

 var p_e_h= 1.0; var p_e_w= 1.0; $('.box1').animate({width:($(".wrapper").width()* p_e_w)},"fast"); $('.box1').animate({height:($(".wrapper").height()* p_e_h)},"fast");

largeur fonctionne, mais pas la hauteur. Sauf si je clique à nouveau sur le bouton. 

 var fiftyPrct = 0.5, //50% hundredPrct = 1; //100% $('.box1').animate({ width: ($('.wrapper').width() * fiftyPrct) }, 'fast'); $('.box2').animate({ width: ($('.wrapper').width() * hundredPrct) }, 'fast');

Devrait bien fonctionner.

Mettre à jour

Étant donné que vous effectuez 2 appels .animate différents, les animations sont mises en queue et exécutées de manière séquentielle. Il suffit de les faire avec le même appel d’animation: 

 var p_e_h= 1.0; var p_e_w= 1.0; $('.box1').animate({ width: ($(".wrapper").width() * p_e_w), height:($(".wrapper").height() * p_e_h) },"fast");

Exemple de travail: jsFiddle