10
votes

jQuery animate pour les attributs d'élément non style

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 xxx

Je veux animer l'attribut d'élément rectangle "x" et "y" quelque chose comme ci-dessous xxx

mais Ce n'est pas correct, car la fonction d'animation affecte le style Not Attribut d'un élément.

Je savais tant de plugin personnalisé est là comme Raphel.js http://raphaeljs.com/

mais je ne veux pas utiliser plugin personnalisé pour le faire. Je veux faire cela simplement en jQuery.Animate Fonction.

est-ce possible?

Merci,

Siva


3 commentaires

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


5 Réponses :


1
votes

J'essaierais quelque chose comme ça xxx

dans le script: xxx


1 commentaires

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?



6
votes

Il suffit d'animer la voie à l'ancienne:

Vous pouvez appeler animate dans une mode jQuery comme la mode.

http://jsfiddle.net/wvv9p/7/ xxx


1 commentaires

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



-1
votes

Ceci peut vous adapter à votre simple xxx


1 commentaires

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



1
votes

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")
        }
    }
)


1 commentaires

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?



0
votes

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 xxx

qui compile dans xxx


0 commentaires