Asaik jQuery Animate Fonction accepte les propriétés de style uniquement. Mais je veux animer les attributs d'un élément. Considérons un rectangle d'élément SVG Je veux animer l'attribut d'élément rectangle "x" et "y" quelque chose comme ci-dessous p> mais Ce n'est pas correct, car la fonction d'animation affecte le style Not Attribut d'un élément. P> Je savais tant de plugin personnalisé est là comme Raphel.js P> P> P> http://raphaeljs.com/ p> mais je ne veux pas utiliser plugin personnalisé pour le faire. Je veux faire cela simplement en jQuery.Animate Fonction. P> est-ce possible? p> Merci, P> Siva P> P>
5 Réponses :
J'essaierais quelque chose comme ça dans le script: p>
Merci. Si vous utilisez la gauche et le haut signifie qu'il y a toujours un attribut x et y est là en éléments. Ensuite, quel élément de position prend?
Il suffit d'animer la voie à l'ancienne:
Vous pouvez appeler http://jsfiddle.net/wvv9p/7/ p> animate code> dans une mode jQuery comme la mode. p>
Pouvez-vous s'il vous plaît expliquer plus de détails. Quelles sont les étapes, la vitesse et le délai d'attente? Qu'est-ce que ST ici? Pourriez-vous s'il vous plaît plus précis
Ceci peut vous adapter à votre simple
Pour autant que je sache ainsi "haut" et "gauche" seront des attributs CSS. La question dit explicitement «les attributs d'élément non style». Si je me trompe, je vais supprimer le vote
D'accord Toutes les réponses ici sont spécifiques à SVG ou à la réapprobation de l'appel .animate () jQuery, j'ai trouvé un moyen d'utiliser l'appel JQuery sans rencontrer le problème que l'attribut est réinitialisé à 0 lorsque l'animation commence:
Permet de dire que nous voulons animer la largeur code> et hauteur code> d'un élément d'étiquette IMG avec ID
image code>. Pour l'animer de sa valeur actuelle à 300, nous pourrions faire ceci: P>
var animationDiv= $("<div></div>"); //we don't add this div to the DOM
var image= $("img#image");
//could use any property besides "top" and "left", but the value must be valid, that means concatenating a "px" to numerical attributes if they don't have it already (and removing them in the step callback if they do)
animationDiv.css("left", image.attr("width"));
animationDiv.css("top", image.attr("height"));
animationDiv.animate(
{
left: 300,
top: 300
},
{
duration: 2500,
step: function(value, properties) {
if (properties.prop == "left")
image.attr("width", value + "px")
else
image.attr("height", value + "px")
}
}
)
N'avez-t-il pas préférable de voter pour fermer la question en tant que duplicata de l'autre question que vous venez de répondre à cette réponse?
J'aime l'approche Hoffmann, mais je pense que c'est plus élégant sans créer un objet Dom virtuel.
Ceci est mon extrait de CoffeScript p> qui compile dans p>
est x et y la position de l'élément?
@caramba oui.it est la position de l'élément rectangle
Dupliqué possible de Animation JQuery d'attributs spécifiques