Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1267 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  j'essaie de modifier une div avec jquery et la methode animate

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

j'essaie de modifier une div avec jquery et la methode animate

n°2103195
tintin34
Posté le 24-09-2011 à 21:29:15  profilanswer
 

bonsoir tout le monde
 
voila mon point de départ:
j'ai un dessin circonscrit dans un réctangle de largeur L et de Hauteur H dont le point en bas a gauche est fixe X0 et Y0
 
je veux simuler une animation en modifiant la largeur (la diminuer par exemple avec un pas fixe de 30px jusqu'a 0) dans le même temps je veux augmenter la hauteur mais cette fois non pas avec un pas fixe mais une fonction euclidienne f, qui à partir de la largeur, me donnera la hauteur
 
je sais ecrire avec plein de variable tout ce qu'il faut en javascript ou avec un autre langage.  
 
A) Mais est-il possible d'obtenir le resultat avec jquerry?
 
 
j'etais parti pour écrire un truc du genre dans mon script
            $('.page').click(    
                       function(){
     
   $('.paget').stop().animate({width:-=30px, height:= ***},500);
 
                       }
 
           );
 
B) je remplace les étoiles par quelque chose du genre f($width)?
C) j'ai vu dans certains script à la place d'une valeur certains mettent 'toggle' est ce que c'est la molette qui donne de quoi calculer les valeurs?
D) peut on imaginer utiliser l'abscisse du pointeur de souris pour faire varier la largeur? y a t'il une variable jquery predefinie?
 
merci a ceux qui pourront m'aider à voir plus clair
                                 
:jap:
 

mood
Publicité
Posté le 24-09-2011 à 21:29:15  profilanswer
 

n°2103443
tintin34
Posté le 26-09-2011 à 21:48:33  profilanswer
 

personne ne sait si c'est faisable ou non?

n°2104352
Pascal le ​nain
Posté le 02-10-2011 à 20:01:11  profilanswer
 

Quelle est le probleme avec la solution (B) ?

n°2104354
tintin34
Posté le 02-10-2011 à 20:33:44  profilanswer
 

:hello:  
Je sais pas si on peut ecrire $width ??
 
si j'ai besoin d'un calcul intermediaire pour trouver mon calcul de hauteur (genre $i:=....) est ce que je peux ajouter $i:=... dans l'accolade avec une virgule ou bien je dois l'inclure dans ma fonction f()?


Message édité par tintin34 le 02-10-2011 à 20:42:44
n°2104359
Pascal le ​nain
Posté le 02-10-2011 à 20:48:37  profilanswer
 

$('.paget').stop().animate({width: 30px, height:  f($(this).width())},500); ?


Message édité par Pascal le nain le 02-10-2011 à 20:49:50
n°2107993
tintin34
Posté le 25-10-2011 à 12:30:18  profilanswer
 

Merci Pascal le nain pour la syntaxe
 
est ce que si je veux mettre dans F une racine carré je dois avant avoir chargé une librairie ou autre chose dans le head de la page?
 
ou bien je peux directe mettre sqrt()?

n°2108141
Pascal le ​nain
Posté le 26-10-2011 à 09:35:46  profilanswer
 

Met directement Math.sqrt(F)

n°2110927
tintin34
Posté le 11-11-2011 à 14:26:14  profilanswer
 

bonjour Pascal le nain (et les autres ;) )
 
avec les indications j'ai écrit ca:
 

<script type="text/javascript">
   $(function(){
      $('.page').hover(    
                       function(){
    $(this).stop().animate({width:500,  
 
height:500 },500);
 
                       }
                                ,
   function(){
    $(this).stop().animate({width:50 ,  
 
height:50},500);
 
                       }
                           );
 
 
   $('.page').click(
   function mvt(x){
    return -0.07*Math.sqr($x)+0.04*($x)+20;
     };
   
                       function(){
     
    $('.paget').stop().animate({width:-=30px,  
 
height:=mvt($(this).width())},500);
 
                       }
                                 
                           );
          });
  </script>


mais ca semble érroné, voyez-vous le hic?


Message édité par tintin34 le 11-11-2011 à 14:29:28
n°2111086
tintin34
Posté le 12-11-2011 à 12:50:20  profilanswer
 

re bonjour tout le monde
 
je croyais avoir corrigé toutes les erreures de syntaxe dans le code ci-dessous
 
mais ca fonctinne toujours pas:
A) je croyais avoir lu qu'on pouvait mettre pour la progression de la largeur par exemple :-= de maniere a provoquer largeur=largeur(precédante) - 30 pixels (dans mon cas) )
 
--> ca pas l'air vu que je suis obligé de mettre :-30 et du coup c'est la valeur limite de la progression que j'indique :bounce:
 
B)il a pas l'air de vouloir ma définition de fonction mvt (le navigateur me dit à la ligne où j'y fait appel que cet objet ne gère pas cette methode :heink: !!!
 
J'espère que certains d'entre vous pourront me sortir de ce bronx :(
 
merci d'avance   :jap:  
-----
 

<script type="text/javascript">
   $(function(){
      $('.page').hover(    
                                                 function(){
                   $(this).stop().animate({width:80, height:80 },500);
 
                                                           }
                                ,
                                      function(){
                   $(this).stop().animate({width:50 , height:50},500);
 
                                                           }
                                       );
 
 
   $('.page').click(
   
   
                       function(){
    function mvt($x){  
                                                          return -0.07*Math.sqr($x)+0.04*($x)+20;  
                                  };  
 
 
$('.paget').stop().animate({width:-30, height:mvt($(this).width())},500);
 
                       }
                                 
                           );
          });
  </script>


Message édité par tintin34 le 12-11-2011 à 13:03:44
n°2111353
tintin34
Posté le 14-11-2011 à 19:26:08  profilanswer
 

Pour B je suppose que ma fonction mvt est pas ecrite au bon endroit??
 
mais où cela serait il mieux?
à moins que je soit obligé de mettre toute la multiplication directement apres le height:???
 
merci à ceux qui peuvent m'aider

mood
Publicité
Posté le 14-11-2011 à 19:26:08  profilanswer
 

n°2111389
Pascal le ​nain
Posté le 15-11-2011 à 00:12:17  profilanswer
 

Pourrais-tu mettre en ligne une version de test ?

n°2111436
tintin34
Posté le 15-11-2011 à 09:58:05  profilanswer
 

Merci Pascal le nain de revenir m'aider
 
j'ai justement mis dans un simple fichier html le code suivant, il faut prendre en plus deux gif de ton choix et les mettre dans le meme dossier que la page html et mettre les noms des deux gif choisis dans le body
 
 

<html>
 <head>
  <style type="text/css" media="screen">
  body{background:#F2F2F2; margin:0; padding:0;}
  .page{position:absolute; bottom:0; right:0; width:50px; height:50px;}
  .page img{width:100%; height:100%;}
 
  .paget{position:absolute; top:100; left:100; width:567px; height:425px;}
  .paget img{width:100%; height:100%;}
   
  </style>
 
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 
  <script type="text/javascript">
   $(function(){
      $('.page').hover(    
                       function(){
    $(this).stop().animate({width:80, height:80 },500);
 
                       }
                                ,
   function(){
    $(this).stop().animate({width:50 , height:50},500);
 
                       }
                           );
 
 
   $('.page').click(
   
   
                       function(){
    function mvt($x){ return (-0.07*Math.sqr($x)+0.04*($x)+20);  
             };  
 
$('.paget').stop().animate({width:-=30, height:mvt($(this).width())},500);
 
                       }
                                 
                           );
          });
  </script>
 </head>
 
 <body>
   
 
  <div class="paget">
   <IMG src="image_toto.gif" />
  </div>
 
  <div class="page">
   <IMG src="fleche.gif" alt="suivant" />
  </div>
 </body>
</html>


 
comme ca tu peux faire des essais en local sur ta machine


Message édité par tintin34 le 15-11-2011 à 10:05:37
n°2111892
Pascal le ​nain
Posté le 16-11-2011 à 19:21:16  profilanswer
 

Il y avait quelque syntax errors que tu aurais pu corriger toi-meme.
La ca fait des choses, mais je ne sais pas si ca correspond a ce que tu veux...
 


  <script type="text/javascript">
   $(document).ready(function()
   {
  $('.page').hover(function()
  {
   $(this).stop().animate({width:80, height:80 },500);
  }
  ,function()
  {
   $(this).stop().animate({width:50 , height:50},500);
  });
 
 
  $('.page').click(function()
  {
   function mvt($x)
   {
    return (-0.07*Math.sqrt($x)+0.04*($x)+20);  
   };  
 
   $('.paget').stop().animate(
    {
     width: 30,
     height:mvt($(this).width())
    },500);
  });
    });
</script>


Message édité par Pascal le nain le 16-11-2011 à 19:21:39
n°2114728
tintin34
Posté le 04-12-2011 à 11:30:32  profilanswer
 

OK Merci j'ai noté que j'avais pas mis au debut du script entre $ et (function ==>(document).ready
 
je savais pas qu'il fallait mettre ca
 
effectivement ca fait quelque chose et bien sûr pas ce que je souhaitais
au lieu de la racine carré je voulais le carré mais bon ca j'ai rajouté un $x en multiplication
 
un peu plus genant mon polynome ne fait pas exactement ce que j'escomptais entre autre finalement j'ai inversé le signe de 0.07 (c'est déjà plus conforme)
 
mais pour que ca corresponde il faudrait que je fasse avant une rotation de mon image 'paget'
 
j'ai vu que dans JQuery il y a rotate(un angle determiné en °)
 
il semble que le centre de rotation soit le centre de l'image
moi je souhaiterais la faire tourner autour de son coin inférrieur gauche
 
y a t'il une autre methode JQuery qui permet cette rotation en precisant son centre?

n°2114730
Pascal le ​nain
Posté le 04-12-2011 à 12:05:27  profilanswer
 

Le pugin rotate de jquery ne permet pas de choisir le centre de rotation d'apres ce que j'ai lu dans la doc.
 
Tu peux toujours regarder les sources et les modifier de facon a choisir le centre.


Message édité par Pascal le nain le 04-12-2011 à 12:07:10
n°2114732
tintin34
Posté le 04-12-2011 à 12:16:12  profilanswer
 

bon ok
sinon je crois que une rotation et un translation doit le faire
 
apres quoi je voudrais déformer avec mon polynome ( ce qui fait que la translation du centre ne va pas etre linéaire)


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  j'essaie de modifier une div avec jquery et la methode animate

 

Sujets relatifs
Modifier contenu d'une SELECT en live[RESOLU] JQuery appel ajax, récuperer la valeur d'une selectbox
passage de parametre avec autocomplete de jquery ui[Qt] Modifier la taille d'une image
[RESOLU] injection de jquery 
Plus de sujets relatifs à : j'essaie de modifier une div avec jquery et la methode animate

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.056 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR