J'ai une bande d'images qui sont positionnées absolument, je veux pouvoir cliquer sur un bouton et les avoir toutes animées à l'endroit où elles seraient normalement sur la page s'ils avaient la position suivante: relatif.
Il est même possible d'animer de la position: Absolute à la position: relative à JQuery?
C'est ce que j'ai:
5 Réponses :
Je ne pense pas que vous puissiez faire cela. jQuery Animate ne fonctionne que sur n'importe quelle "propriété numérique CSS".
Pas vraiment ... vous pouvez aussi changer la couleur du texte ou de l'arrière-plan. :)
Mais la couleur n'est-elle pas une valeur numérique?
@TiUTALK - Bon point, mais je pense que Exodusnicholas a raison, dans cette situation, JQuery utiliserait les aspects numériques de la couleur pour l'animer, incrémenter / décrémenter les valeurs RVB, le cas échéant, pour déplacer la couleur.
Si vous regardez le code lorsque JQuery aime une couleur, vous verrez les valeurs RVB placées dans l'attribut de style des éléments et augmenter / diminuer (comme Rosscj2533).
NO.
Cependant, vous pouvez vérifier l'emplacement actuel de l'élément (appel POSITION () ), définissez la position sur relatif et animer de l'emplacement d'origine à l'actuel.
Je ne sais pas comment j'irais cela, y a-t-il une chance que vous puissiez m'aider à commencer? Ce que j'essaie de faire est de fournir 2 points de vue différents pour les personnes, chaque article a une image, et je souhaite que ces images puissent animer leur position lorsque le bouton 2ND View soit enfoncé, puis appuyé sur la touche 1ST. , demandez-leur d'animer à la première position.
Pour un exemple, voir la réponse de Tatu Ulmanen, ce qui est exactement ce que je décrivais.
Non, vous ne pouvez pas l'animer directement, mais vous pouvez trouver le point final et animer la position là-bas. Quelque chose comme ça pourrait fonctionner lors de l'animation vers la position statique : C'est un peu hacky, mais cela devrait fonctionner.
Vous devez appeler position () , pas offset () .
Ah tu es merveilleux. Le seul problème est que toutes les images (elles sont réparties sur la page) animent à la position de la première image, puis apparaissent instantanément dans leur position statique, mais chaque image ne s'anime pas à sa propre position statique . Tout indice comment résoudre ce problème?
Faites une boucle chacune où vous gérez chacune des images individuellement. Vous sélectionnez probablement maintenant tous les éléments d'une déclaration (votre var el est quelque chose comme $ ('img.foo') , cela fait toutes les opérations relatives à la première image . J'ai mis à jour mon message pour montrer ceci.
@Slaks, bon point, j'ai vraiment toujours utilisé offset () mais position () semble un peu plus approprié.
Maintenant, la première image animée à l'endroit où elle devrait, mais toutes les autres images animent à la position absolue de l'endroit où la première image était.
Désolé, mon erreur. Il aurait dû être el.position () au lieu de $ ('élément'). Position () . Fixé.
Maintenant, c'est de retour à toutes les images animant à la première image de la première image :(
@Exodusnicholas, peut-être que j'aurais dû le tester moi-même avant de poster :) Je vais y jeter un coup d'œil à un moment donné.
J'aime la solution de Tatu, mais j'ai trouvé que ce code réutilisable sera meilleur à mes besoins:
var props = {'top' : 200, 'left' : 300};
var options = {'duration': 1000};
specialSlide($('#elementToMove'), props, options);
Vous pouvez essayer la méthode CSS pour le rendre relatif, puis animer.
$(".change_layout").click(function(){
$(".book_img").css({'position': 'relative'}).animate({top:'0px', left:'0px'}, 1000)
})
Êtes-vous sûr que vous voulez dire
relative et nonstatique ? Commestatique est la position "par défaut".