Forums Développement Multimédia

Aller au contenu

jQuery enchaînement d'actions

CODE Ajax JQuery EaseJs

2 réponses à ce sujet

#1 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 7017 messages

Posté 25 May 2013 - 14:51 PM

Salut,

Je suis en train de m'amuser un peu avec jQuery histoire de prendre en main la lib, et bien sur je bloque sur un truc surement de noob...

J'ai une div contenant une image et que je souhaite utiliser comme un conteneur unique.
Je cherche à la faire sortir par la droite de l'écran puis la repositionner a gauche hors de l'écran, changer son contenu et la refaire entrer par la gauche pour la replacer au centre.

Je souhaite pouvoir renouveler la chose à l'infini avec un seul conteneur (div), l'enchaînement des anims ne pose pas de problème avec les callbacks de base :

$('#conteneur').animate({right:'-2000px'},"slow",
        function(){$('#conteneur').animate({left:'-2000px'},1,
                function(){$('#conteneur').animate({left:'0px'},"slow");
        });
});

Mais je ne trouve pas de solution pour le moment pour changer le contenu tout en conservant l'enchaînement des animations. J'ai bien tenté d'utiliser du setTimeout ou du setInterval, ou encore du delay() :

setTimeout("$('#inside').empty().append($('#global').find('#contenu').children())", 500);

Ça marche, mais ça me semble peu précis si jamais le changement de contenu prend du temps.

Précision, j'ai une div avec un id "inside" dans ma div "conteneur", et une div avec une id "contenu" placée en dehors de la page, le tout est englobé dans une div "global".

Je m'étudie ce tuto : http://fguillot.deve...ks-avec-jquery/
Et je me dirige vers les "promise" et les listes.... mais si vous avez des idées ou des infos je suis preneur.

Merci.

#2 dcz.switcher

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 2533 messages

Posté 03 June 2013 - 10:02 AM

Salut,

je trouve enfin le temps de me pencher sur ton post ...

Bon, alors voilà comment j'aborderai le problème sachant que j'utiliserais plutôt 2 conteneurs pour l'image, mais vu que tu insistes sur la containte, j'imagine que toi aussi tu as envisagé cette option, donc avec un seul, voici un proposition.

Le HTML

<button>go !</button>
<div id="main">
  <div id="conteneur">
   <img src="">
  </div>
</div>
 

Le CSS

#main{
   position: absolute;
   background-color: green;
   height:400px;
   width : 400px;
   overflow: hidden;
  }
  #conteneur{
   position: relative;
   width : 200px;
   height: 200px;
   background-color: red;
  }
 

enfin le JS

jQuery(document).ready(function($) {

  // fin du premier mouvement
  function endMoveHandler(e){
   $(this)
        .css('left', '-400px') // on replace à gauche
        .find('img') // on cible l'image
        .on('load', $.proxy( imageLoaded, this ) ) // ecouteur sur le chargement
        .prop('src', 'postit.png'); // on charge l'image
  }
  // image chargée, on anime
  function imageLoaded(e){
   $(this).animate({left:'0px'}, 'slow');
  }
  // on lance la premiere animation
  function move(){
   $('#conteneur').animate(
           {left:'400px'},
           "slow",
                         endMoveHandler
   );
  }
  $('button').on('click', move);
});
 

edit : il semble que finalement ça ne fonctionne pas terrible lorsqu'on lance plusieurs fois l'animation, je pense que ça vient de l'écouteur que je n'enlève jamais sur l'event load.
Avec off( ), pareil, mais avec one( ) ça passe, je propose donc


$(this)
    .css('left', '-200px') // on replace à gauche
    .find('img') // on cible l'image
    .one('load', imageLoaded ) // ecouteur sur le chargement
    .attr('src', 'postit.png'); // on charge l'image
 

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

embryon de site

#3 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 7017 messages

Posté 03 June 2013 - 10:43 AM

Hello,

Nickel, merci, il me manquait effectivement quelques méthodes pour réussir à faire plus simple et surtout la gestion des écouteurs qui est clairement ce qu'il me faut. Je n'ai pas encore testé mais ça me parait clair comme code, à le lire ça devrait faire ce que je veux avec quelques aménagements.

Je regrette vraiment AS, ça me saoule de devoir me replonger dans la doc en permanence, j'ai l'impression d'être un méga débutant avec ses cahiers et sa documentation toujours ouverte, à chercher mes mots pour des trucs simples, grrrrrrrrrrr

Merci en tout cas de ta solution, je pense que je vais adopter et réutiliser ;-)



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

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