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

j'essaie de modifier une div avec jquery et la methode animate - HTML/CSS - Programmation

Marsh Posté le 24-09-2011 à 21:29:15    

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:
 

Reply

Marsh Posté le 24-09-2011 à 21:29:15   

Reply

Marsh Posté le 26-09-2011 à 21:48:33    

personne ne sait si c'est faisable ou non?

Reply

Marsh Posté le 02-10-2011 à 20:01:11    

Quelle est le probleme avec la solution (B) ?

Reply

Marsh Posté le 02-10-2011 à 20:33:44    

: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
Reply

Marsh Posté le 02-10-2011 à 20:48:37    

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


Message édité par Pascal le nain le 02-10-2011 à 20:49:50
Reply

Marsh Posté le 25-10-2011 à 12:30:18    

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()?

Reply

Marsh Posté le 26-10-2011 à 09:35:46    

Met directement Math.sqrt(F)

Reply

Marsh Posté le 11-11-2011 à 14:26:14    

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
Reply

Marsh Posté le 12-11-2011 à 12:50:20    

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
Reply

Marsh Posté le 14-11-2011 à 19:26:08    

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

Reply

Marsh Posté le 14-11-2011 à 19:26:08   

Reply

Marsh Posté le 15-11-2011 à 00:12:17    

Pourrais-tu mettre en ligne une version de test ?

Reply

Marsh Posté le 15-11-2011 à 09:58:05    

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
Reply

Marsh Posté le 16-11-2011 à 19:21:16    

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
Reply

Marsh Posté le 04-12-2011 à 11:30:32    

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?

Reply

Marsh Posté le 04-12-2011 à 12:05:27    

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
Reply

Marsh Posté le 04-12-2011 à 12:16:12    

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)

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed