jQuery Girl
  1. jQuery Girl
  3. Passez du centre de l’animation avec JQuery
Intereting Posts
net :: ERR_INSECURE_RESPONSE lors de la requête ajax depuis node-webkit Ajouter plusieurs variables sur la fonction javascript? retard dans le succès ajax ne fonctionne pas Django: Passage d’une chaîne HTML dans un modèle jQuery on blur ne fonctionne pas correctement Obtenir l’atsortingbut font-size de la propriété style Comment actualiser une page chaque fois que mon fichier de données json change html2canvas javascript screenshot et upload JQuery: Comment sélectionner des lignes dans une table Appelez la méthode serveur sans actualiser la page select2 – erreur de sélection Style de bordure personnalisée – réceptif, style de bordure personnalisée & dynamic – ajustement en hauteur, coin de bordure personnalisé – double trait Empêcher le défilement de page après clic? Javascript – Créer une arborescence à trois niveaux, deux boîtes de sélection de colonnes – HTML Puis-je supprimer le style entier des tabs de l’interface utilisateur jQuery sans rompre le style des autres composants de l’interface utilisateur?

Passez du centre de l’animation avec JQuery

Je cherche à avoir un popup div à partir d’un bouton. Lorsque le bouton est cliqué, je souhaite que la fenêtre contextuelle se développe à partir du centre du bouton tout en glissant vers le centre de l’écran. Je ne pense pas que cela devrait être trop difficile, mais je ne trouve aucun extrait nulle part. Toute aide serait grandement appréciée.

Grâce à l’aide de Jamie Dixon, ce code a fonctionné. 

$('#grower').css({ backgroundColor: '#FFFFFF', border: '10px solid #999', height: '0px', width: '0px', color: '#111111', fontWeight: 'bold', padding: '10px', display: 'none', position: 'absolute', left: $(this).position().left, top: $(this).position().top }).appendTo('#overlay').fadeIn(0).animate({ position: 'absolute', height: '200px', width: '600px', marginTop: '-120px', marginLeft: '-320px', display: "", top: ((($(parent).height() - $(this).outerHeight()) / 2) + $(parent).scrollTop() + "px"), left: ((($(parent).width() - $(this).outerWidth()) / 2) + $(parent).scrollLeft() + "px") }, 1000);

Vous pouvez utiliser l’interface utilisateur de jQuery avec la méthode show en passant “scale” en tant que paramètre. 

  $('#growwer').show("scale",{}, 1000);

Exemple de travail

Pour faire glisser votre élément au centre de la page, j’ai créé une version modifiée de la fonction jQuery de Tony L, disponible ici: Utilisation de jQuery pour centrer un DIV sur l’écran .

Exemple de travail

Mettre à jour

Voici un exemple de travail des deux animations s’exécutant simultanément:

http://jsfiddle.net/wNXLY/1/

Pour que cela fonctionne, j’ai inclus un paramètre supplémentaire sur la fonction animate transmettant: {duration: durationLength, queue: false}