Forums Développement Multimédia

Aller au contenu

Fonction intervalle d'une animation sous jQuery

CODE Ajax JQuery EaseJs

11 réponses à ce sujet

#1 Levendivin

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 302 messages

Posté 27 April 2013 - 18:12 PM

Bonjour à tous,

Je voudrais une animation qui se répète avec une intervalle en jQuery avec la fonction setInterval(), genre si un jour je peux créer une zone animée sur une page web. J'ai essayé deux façons de l'écrire, mais rien ne fonctionne, pas d'animation du tout, voici le code jQuery :

function bis(){
   $('#cercle').animate({left : '+=300'}, slow)
                .animate({top : '+=30'}, slow)
                .animate({left : '-=300'}, slow)
                .animate({top : '-=30'}, slow);
  };
  setInterval(bis, 2500);
 

2e façon :

setInterval(function bis(){
   $('#cercle').animate({left : '+=300'}, slow)
                .animate({top : '+=30'}, slow)
                .animate({left : '-=300'}, slow)
                .animate({top : '-=30'}, slow);
  }, 2500);
 

Connaissez-vous la solution ?

#2 dcz.switcher

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 2533 messages

Posté 28 April 2013 - 08:28 AM

Salut,

Pour commencer, ton #cercle est t-il bien en position absolute ?

Ensuite, la fonction animate( ) renvoi un évènement lorsqu'elle est terminée, tu peux utiliser ce dernier pour relancer ton animation.

http://api.jquery.com/animate/

exemple:
Le CSS

.square-wrapper{
   margin:50px 0 0 50px;
   position:relative;
  }
 
  .square{
   background-color:#a8accb;
   width:50px;
   height:50px;
   position:absolute;
  }
 

le HTML

<button id="start-btn">animate</button>
  <div class="square-wrapper">
   <div class="square"></div>
  </div>
 

Et enfin le JS


jQuery(document).ready(function($){
   
    var $square = $('.square');
   
    $('#start-btn').on('click', startAnimation );
           
    function startAnimation(){
         $square.animate({left:'+=200'}, 'slow');
         $square.animate({top :'+=200'}, 'slow');
         $square.animate({left:'-=200'}, 'slow');
         $square.animate({top :'-=200'}, 'slow', startAnimation);
    }
   
   });
 

"Ce que l'on conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément"

embryon de site

#3 Levendivin

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 302 messages

Posté 28 April 2013 - 16:25 PM

Salut !

Non, mon cercle est en position relatif, mais je ne vois en quoi ça empêche le fonctionnement de l'animation, mais en tout cas j'ai essayé 'absolute' ça ne marche pas non plus.

En fait l'exemple que tu m'as fait, je l'ai déjà fait, et ça m'a posé de souci, ce que je veux, c'est qu'une animation se joue toute seule, et qui se rejoue toutes les 30 secondes par exemple, ainsi à l'infini, je n'ai pas besoin de l'interraction avec l'internaute.

#4 Levendivin

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 302 messages

Posté 28 April 2013 - 17:04 PM

Resalut !

Ca marche avec le code js que j'ai mis en fait, j'ai juste remis les apostrophes à 'slow'

setInterval(function(){
   $('#cercle').animate({left : '+=300'}, 'slow')
                .animate({top : '+=30'}, 'slow')
                .animate({left : '-=300'}, 'slow')
                .animate({top : '-=30'}, 'slow');
  }, 2500);
 
mais le souci de cette fonction est qu'il commence par exécuter l'intervalle, ensuite l'animation se joue, là mon intervalle est de 2500, ça veut dire que l'internaute arrive sur la page web, il faudrait attendre après avoir passé les 2500 millisecondes pour que l'animation s'exécute, je trouve que c'est pas top. Imaginons que l'intervalle fait plus que ça, parfois on ne sait peut-être pas qu'il y a une animation là-bas avant de quitter la page.

Y a-t-il un moyen pour que l'animation s'exécute d'abord et ensuite le temps de l'intervalle s'applique ?

#5 dcz.switcher

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 2533 messages

Posté 28 April 2013 - 18:05 PM

avec ta première technique en appelant la fonction dès le départ ?


function bis(){
   $('#cercle').animate({left : '+=300'}, 'slow')
                                .animate({top : '+=30'}, 'slow')
                                .animate({left : '-=300'}, 'slow')
                                .animate({top : '-=30'}, 'slow');
  };

  bis(); // appel de la fonction au chargement de la page
  setInterval(bis, 2500);
 

"Ce que l'on conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément"

embryon de site

#6 Levendivin

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 302 messages

Posté 28 April 2013 - 18:30 PM

Oui, les 2 marchent en fait, c'est juste parce qu'il manquait les apostrophes. Il n'y a pas la ligne " bis(); " et le " ; " après l'accolade. Mais le problème maintenant c'est le temps de l'intervalle qui commence en premier. Y a-t-il un moyen pour palier ça ?

Au passage, comme tu es manager, peux-tu renommer le titre du post STP ? il est trop vague=> "Fonction intervalle d'une animation sous jQuery" ou si tu as une meilleure idée..... je n'ai plus la main. Merci ;-)

#7 dcz.switcher

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 2533 messages

Posté 28 April 2013 - 19:13 PM

Citation

le problème maintenant c'est le temps de l'intervalle qui commence en premier

C'est justement l'intérêt de rajouter un appel à la fonction bis dès le départ, ainsi l'animation s'exécute immédiatement puis ensuite une fois le premier interval terminé.
Il n'y a plus de pause à l'affichage de la page donc.

Je renomme également le post.
"Ce que l'on conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément"

embryon de site

#8 Levendivin

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 302 messages

Posté 28 April 2013 - 21:58 PM

Citation

C'est justement l'intérêt de rajouter un appel à la fonction bis dès le départ, ainsi l'animation s'exécute immédiatement puis ensuite une fois le premier interval terminé
non, même avec un appel à la fonction bis dès le départ, c'est l'intervalle qui s'exécute en premier :cry:

Merci pour avoir renommé le post

#9 dcz.switcher

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 2533 messages

Posté 29 April 2013 - 07:28 AM

Il est possible que je ne saisisse pas la problématique, auquel cas, je m'en excuse par avance.

Je pense que l'utilisation du setInterval n'est pas nécessaire ici, voici la même animation sans le bouton start qui se lance dès que la page est affichée.


<body>
  <div class="square-wrapper">
   <div class="square"></div>
  </div>
 
  <script src="../../cdn/libs/js/jquery/1.9.1/jquery.min.js"></script>
 
  <script>
   jQuery(document).ready(function($){
   
    var $square = $('.square');
   
           
    function startAnimation(){
         $square.animate({left:'+=200'}, 'slow');
         $square.animate({top :'+=200'}, 'slow');
         $square.animate({left:'-=200'}, 'slow');
         $square.animate({top :'-=200'}, 'slow', startAnimation);
    }
   
    startAnimation();
   
   });
  </script>
</body>
 

"Ce que l'on conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément"

embryon de site

#10 Levendivin

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 302 messages

Posté 29 April 2013 - 09:56 AM

Salut,

C'est presque ça ! c'est bien que l'animation se joue dès la page est affichée, mais ce que je veux, c'est une fois l'animation est jouée, elle s'arrête un peu (genre 4 secondes) puis reprend, ainsi à l'infini.... c'est pour ça je me tournais vers le setInterval()

Suis-je claire ? :roll:

#11 dcz.switcher

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 2533 messages

Posté 29 April 2013 - 18:57 PM

Sans vouloir paraphraser la pomme: il y a une fonction pour ça
http://api.jquery.com/delay/


// exemple pause de 1 seconde entre chaque animation
function startAnimation(){
         $square.animate({left:'+=200'}, 'slow');
         $square.animate({top :'+=200'}, 'slow');
         $square.animate({left:'-=200'}, 'slow');
         $square.animate({top :'-=200'}, 'slow', startAnimation).delay(1000);
    }
 

"Ce que l'on conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément"

embryon de site

#12 Levendivin

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 302 messages

Posté 29 April 2013 - 21:18 PM

Salut dcz.switcher !

J'ai enfin obtenu l'effet que je souhaite dont une animation qui se lance dès la page est affichée, une fois jouée, pause puis reprise.
Mais si j'ai recopié ton code, ça n'a pas marché, après j'ai fait des essais et enfin je suis arrivée à ce code pour que ça marche :

function startAnimation(){
                 $('.square').animate({left:'+=200'}, 'slow')
           .animate({top :'+=200'}, 'slow')
           .animate({left:'-=200'}, 'slow')
           .animate({top :'-=200'}, 'slow', startAnimation).delay(1000);
        };
startAnimation();
 
J'eesaye de réfléchir pour comprendre, enfin l'essentiel est que ça marche ! :roi: MERCI !
RESOLU



1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)