Comment animer un objet un par un?

J'essaye d'animer mon objet un par un. J'utilise animate.css pour l'animation. Dire comme j'ai 7 li élément comme dans l'exemple ci-dessous, il est zoom tout le temps, mais je veux produit 1 va zoomer 1er puis 2,3,4 --- 7 mais chacun sera retardé comme 1s ou 10ms quelque chose comme:

  
  • product 1
  •     
  • product 2
  •     
  • product 3
  •     
  • product 4
  •     
  • product 5
  •     
  • product 6
  •     
  • product 7
  • 
    

    J'ai vu le document animate.css dit pour retarder l'utilisation -vendor-animation-delay: 2s; J'ai essayé cela mais je n'ai pas encore réussi.

    demo : http://jsfiddle.net/cyber007/6x9re4yf/

    En plus, j'essaie aussi. Chaque fois que je clique sur l'un de ces objets, le zoom arrière sera identique un par un. Une idée comment puis-je faire ça?

    0
    Vous avez besoin d'un @keyframes et d'un sélecteur de référence pour cette animation. Vous pouvez le voir ici: w3schools.com/css/css3_animations.asp
    ajouté l'auteur Kirk Powell, source

    1 Réponses

    your -vendor-animation-delay: 2s; should be animation-delay: 2s;

    Cela fonctionne bien:

     animation-delay: 2s;
    

    http://jsfiddle.net/0Lv8ycju/

    supplémentaire j'essaie aussi. quand jamais je clique sur l'un d'eux, il va zoomer même comme un par un. Toute idée comment puis-je le faire?

    ajoutez un événement jQuery comme ceci:

    $(document).ready(function(){
    
       $(".animated").click(function(){
          $(".hexagonarea li.pos1").delay(1).animate({width:"0px",height:   "0px"});
        $(".hexagonarea li.pos2").delay(500).animate({width:"0px",height: "0px"});        
    
            //add other pos3,pos4..... here
    
     });
    });
    

    take a look here: http://jsfiddle.net/0Lv8ycju/

    Update: you will also have to include jQuery lib into the head of your document

    J'ai réussi à faire une simple boucle avec chaque() pour zoumOut un par un avec un petit extrait donc voici:

    $(document).ready(function(){
    
     $(".animated").click(function(){
      var i=1; //delay time 
      var y=1;       
      $( "li" ).each(function( index ) {    
       $(".hexagonarea li.pos"+y).delay(1+i).animate({width:"0px",height:   "0px"});
        $(".hexagonarea li.pos"+y).css({overflow:"hidden"});
       i+=100;// increase this to increase delay time (miliseconds)
        y+=1;   
         });
       });
     });
    

    http://jsfiddle.net/88aqmy45/

    0
    ajouté
    merci beaucoup de cette façon de travailler :) toute idée comment faire zoomOut quand je clique sur un objet alors
    ajouté l'auteur pagol, source
    Merci encore. j'ai mis à jour mon fichier jsfiddle.net/cyber007/88aqmy45/2 pouvez-vous m'aider à comprendre comment faire pour retourner le travail du bouton. Je veux dire après zoom, je montre une autre div avec animation zoomin. ça marche très bien et il y a un bouton appelé BACK. Je veux que je clique en arrière puis cette boîte va zoomer et tous les li (pos) zoomin. aussi je pense que mon code jQuery pas si gentil je répète 6 fois même code pour show div. peut-être qu'il vaut mieux si belle façon
    ajouté l'auteur pagol, source
    J'ai mis à jour plus .. mon script fonctionne bien. mais je veux savoir suis-je droit chemin correctement fait mon code jQuery ou non. aussi je répète le même code encore et encore. Je pense qu'il est possible de le rendre simple par quelques lignes. aucune idée comment jsfiddle.net/cyber007/88aqmy45/3
    ajouté l'auteur pagol, source
    @pagol vérifier le code mis à jour ci-dessus fonctionne comme un charme!
    ajouté l'auteur nada, source
    Lisez comment utiliser les boucles, avec jquery, chacune() est très facile et vous fera gagner beaucoup de temps et de difficulté. lire ici: api.jquery.com/each votre jQuery semble assez bien! J'ai envelopper les éléments li autour d'une boucle .each() pour réduire le code de répéter que vous aviez jeter un oeil: jsfiddle.net/Lrggdzfo
    ajouté l'auteur nada, source