jQuery Girl
  1. jQuery Girl
  3. Capturer dynamicment une position div
Intereting Posts
Déclenche le rappel lorsque la sélection a été effectuée avec select2 4.0 et récupère la valeur de la dernière sélection Passage d’un tableau JSON à l’API Web MVC via GET Problème FireBug: impossible d’utiliser console.log La valeur de suivi / observation de la zone de texte a été modifiée appeler une méthode de page ascx en utilisant jquery Obtenir le nom du fichier de téléchargement avant le téléchargement avec le plugin jQuery File Upload D3 js graphique compressible augmentant le rayon de la courbe d’arc Puis-je accéder à mon référentiel de bitbucket privé avec ajax et jquery? Extraire les données JSON Le plugin jqDnR ne fonctionne pas avec jQuery 1.4 JQuery UI Datepicker perd le focus lors de la sélection de la date avec la souris Comment obtenir une en-tête de cartes ou similaire pour avoir la même hauteur avec flex box? Appeler une fonction avec le paramètre au clic d’une cellule jqgrid Onglets de l’interface utilisateur jQuery: identificateur de fragment incompatible jQuery: comment puis-je placer l’élément sous mon curseur?

Capturer dynamicment une position div

Existe-t-il un moyen d’afficher / capturer une valeur supérieure divs pendant qu’elle change d’animation, comme dans l’onglet Eléments de l’outil de développement Chrome? J’ai essayé d’obtenir getComputedStyle et getPropertyValue mais cela ne fonctionne pas. C’est ce que j’ai essayé jusqu’à présent 

var top_sq = document.getElementById("square"), style_sq_top = getComputedStyle(top_sq), sq_top = style_sq_top.getPropertyValue("top"), act_sq_top = sq_top.subssortingng(0, 3); var tv = document.getElementById("top_value").text = sq_top; $("#btn1").click(function(){ $("#square").animate({top:"300px"}, 3000); tv.toSsortingng; });

http://jsfiddle.net/QYVQT/

Le problème avec le code que vous avez fourni est que tv ne change pas dynamicment car la boîte est animée. N’oubliez pas que sq_top est simplement un nombre. Lorsque vous définissez tv égal à sq_top , vous le définissez à un nombre. Ainsi, la valeur de tv ne change pas lorsque la boîte se déplace.

Au lieu de cela, recalculez-le à chaque fois. Vous pouvez utiliser la propriété progress de la fonction .animate() pour cela. Voir ici: http://www.bennadel.com/blog/1856-using-jquery-s-animate-step-callback-function-tcreate-ceate-animations.htm .

Code utilisant la fonction $.progress() : 

 var square = document.getElementById("square"), squareTop = null, squareTopSsortingng = null, tvDiv = document.getElementById('top_value'); $("#btn1").click(function(){ $("#square").animate( {top:"300px"}, { duration: 3000, progress: function(){ /* get the top of the square */ squareTop = square.style.top; /* format it correctly */ dotLoc = squareTop.indexOf('.'); if(dotLoc == -1){ squareTopSsortingng = squareTop; } else{ squareTopSsortingng = squareTop.subssortingng(0, dotLoc) + 'px'; } /* display the current top position, eg "200px" */ tvDiv.innerHTML = squareTopSsortingng; }, easing: "swing" } ); });

Et un violon: http://jsfiddle.net/KLhzp/3/

Voici un exemple d’utilisation du rappel step() jQuery animate() . 

 var top_sq = document.getElementById("square"), style_sq_top = getComputedStyle(top_sq), sq_top = style_sq_top.getPropertyValue("top"), act_sq_top = sq_top.subssortingng(0, 3); var $tv = $("#top_value") $tv.text(act_sq_top); $("#btn1").click(function () { $("#square").animate({ top: "300px" }, { duration: 3000, step: function (now, fx) { pos = Math.round(now); $tv.text(pos); } }); });

Et voici un violon http://jsfiddle.net/QYVQT/2/