Séquence d'animation jQuery

Je travaille sur un site web où je veux faire un joli menu, qui se décline en lien par lien.Séquence d'animation jQuery

Code ci-dessous: Premier fondu dans #navigation a.toplevel, puis le premier #navigation dt, puis le suivant, et le suivant jusqu'à ce qu'il n'y en ait plus.

Comment faites-vous une séquence de fadein?

<div id="navigation"> 
     <a href="#" class="toplevel">Solutions</a> 
     <dl> 
      <dt><a href="#">ERP</a></dt>    
      <dd> 
       <ul> 
        <li><a href="#">About</a></li>      
        <li><a href="#">Something</a></li>      
        <li><a href="#">Something else</a></li> 
       </ul> 
      </dd> 
      <dt><a href="#">CRM</a></dt>    
      <dd> 
       <ul> 
        <li><a href="#">About</a></li>      
        <li><a href="#">Something</a></li>      
        <li><a href="#">Something else</a></li> 
       </ul> 
      </dd> 
      <dt><a href="#">BI</a></dt>    
      <dd> 
       <ul> 
        <li><a href="#">About</a></li>      
        <li><a href="#">Something</a></li>      
        <li><a href="#">Something else</a></li> 
       </ul> 
      </dd> 
     </dl> 
</div>

Merci d'avance.

Source

2010-11-17 curly_brackets

Voulez-vous dire par là?

Exemple:http://jsfiddle.net/8gFLg/2/

$('#navigation > a, #navigation dt').each(function(idx) { 
    $(this).delay(idx * 600).fadeIn(600); 
});

Source

2010-11-17 13:25:44 user113716

Exactement! Pouvez-vous me dire alors, comment ajouter un slideDown sur un autre élément après la fin du dernier DT? Et peut-être comment ajouter une classe, qui s'estompe après? –

@Kenneth B: J'aurais besoin de plus de détails pour le slideDown. Comme quel élément glisse vers le bas? Voulez-vous dire chaque '

'? En outre, vous ne savez pas ce que vous voulez dire en ajoutant une classe qui apparaît. – user113716

@Kenneth B: Peut-être que c'est ce que vous vouliez dire pour le slideDown? http://jsfiddle.net/8gFLg/3/ – user113716

Il vous suffit d'imbriquer un autre Fadein dans votre fonction Fadein.

$('#navigation a.toplevel').fadeIn(function(){ 
     $('#nextthing').fadeIn(function(){ 
      $('#thenextthing').fadeIn(); 
     }); 
});

Avez-vous besoin de savoir comment faire une boucle à travers les années dt?

Source

2010-11-17 12:56:57 Blowsie

Merci! :-) Si je fais cela, disons 10 fois, pour m'assurer que même si mon client ajoute des liens, l'effet fonctionnera toujours, alors IE se plaindra car il n'y en a pas encore 10. Comment puis-je obtenir par cela? Un IF? –

Comment puis-je faire en sorte que les différents DT se fondent l'un après l'autre, et pas en même temps, sans leur donner des classes différentes? –

Le code ci-dessus devrait faire l'un après l'autre, pas en même temps ... Je ferai un commentaire plus tard avec un moyen de compter et de boucler chaque dt – Blowsie

Oops .. viens juste de réaliser que la sortie épeautre et d'une solution quelque peu laborieuse suggérées ci-dessous est l'équivalent de la plus courte et plus intelligente celle suggérée par user113716 ci-dessus - à condition toutefois , que les éléments à animer sont commodément disposés dans la séquence correcte en html.

Si ce n'est pas le cas, vous pouvez toujours utiliser celui-ci:

$(document).ready(function() { 
    var time=0; 
    var interval=500; 
    $('#id1').delay(time).animate({top:100},interval); 
    time=time+interval; 
    $('#id2').delay(time).animate({top:100},interval); 
    time=time+interval; 
    interval=1000; 
    $('#id3').delay(time).animate({top:100},interval); 
    time=time+interval; 
    $('#id4').delay(time).animate({top:100},interval); 
    time=time+interval; 
})

est ici un violon javascript basé sur ce code: http://jsfiddle.net/dj89d/

Source

2013-01-02 13:07:44 Francis

Répondre

Questions connexes