Comment ajouter une animation de diapositives lors de l'affichage d'éléments

Je souhaite ajouter un effet d'animation au code suivant lors de l'affichage d'éléments de l'arborescence.Comment ajouter une animation de diapositives lors de l'affichage d'éléments

Je sais que jquery a des fonctions de diapositives, et css a "transition", mais je ne sais pas comment les appliquer à mon code. Des idées?

<head> 
    <script language="JavaScript"> 
     function show(){ 
      var elements = document.getElementsByClassName("label"); 
      for(var i = 0, length = elements.length; i < length; i++) { 
       elements[i].style.display = 'block'; 
      } 
     } 
    </script> 
    <style> 
     .label { 
      -webkit-padding-start: 20px; 
      display: none; 
      } 
    </style> 
</head> 
<body> 
    <div> 
     <div onclick="show()">1st Row</div> 
     <div> 
      <div class="label">First</div> 
      <div class="label">Second</div> 
      <div class="label">Third</div> 
     </div> 
     <div>2nd Row</div> 
    </div> 
</body>

Source

2011-08-25 Deqing

Si vous envisagez d'utiliser jQuery, vous pouvez utiliser la méthode slideDown et slideUp pour afficher/masquer les éléments avec animation. Il y a slideToggle méthode qui montre alternativement/cache l'élément avec animcation. Vous pouvez modifier votre méthode show comme ci-dessous

travail demo

function show(obj){ 
     var $this = $(obj);//Here obj points to the element clicked 

     //Now you have to show/hide the next sibling of the element clicked 
     //We will use next() method which gives the next sibling of element 
     //And then call slideToggle on it to show/hide alternatively 
     $this.next().slideToggle(); 
    }

Changement dans le balisage

<div onclick="show(this)">1st Row</div>

Source

2011-08-25 05:12:02 ShankarSangoli

Merci. Comment puis-je montrer ces éléments de rien à afficher? – Deqing

Jetez un oeil à la démo J'ai d'abord caché la div comme vous voulez. – ShankarSangoli

function show() { 
    $('.label').slideDown(); 
}

Ceci permet de sélectionner tous les éléments avec la classe .label et les glisse en vue. Il existe également une fonction .fadeIn().

Vous pouvez également joindre des gestionnaires par cliquer sélecteurs (comme un identifiant ou classe):

<div> 
    <div class="row">1st Row</div> 
    <div> 
     <div class="label">First</div> 
     <div class="label">Second</div> 
     <div class="label">Third</div> 
    </div> 
    <div class="row">2nd Row</div> 
</div>

Avis J'ai retiré la déclaration onClick="" et a ajouté une classe à la div rangée. Ensuite, vous pouvez sélectionner l'élément que vous souhaitez joindre l'événement clic pour et garder tout le code dans un seul endroit:

$('.row').bind('click', function() { 
    $(this).next().find('.label').slideToggle(); 
});

Cette JavaScript ajoute ci-dessus un gestionnaire de clic à tous les éléments avec la classe row et permet de basculer l'affichage de tous des éléments avec la classe label dans l'élément suivant.

Voici une jsfiddle: http://jsfiddle.net/L34g3/.

Source

2011-08-25 05:02:22 Jasper

question comme ci-dessus pour @ShankarSangoli, dans cette solution, les sous-éléments montrent lors du chargement de la page. Puis-je faire l'état initial à cacher, comme dans mon code? – Deqing

Même réponse que ShankarSangoli, le CSS est configuré pour ne pas afficher les sous-éléments sur pageload, vérifier le jsfiddle dans mon message et regarder en haut à droite sous CSS. – Jasper

Comment ajouter une animation de diapositives lors de l'affichage d'éléments

Répondre

Questions connexes