JQuery animation Question

Question

J'ai créé une animation jquery qui peut être vu en cliquant sur le bouton Aperçu sur:

http://jsbin.com/anayi3/edit

J'ai utilisé la méthode d'animation slideDown. Le problème est que tous les éléments glissent ensemble. Je veux à chaque numéro à afficher après un court délai. Il ne devrait pas être beaucoup de problème pour les développeurs jquery expérimentés.

Comment faire?

Merci d'avance.

Answer 1

Un exemple utilisant une fonction anonyme récursive. Mettez ceci dans votre fonction prête pour le document.

// Array of elements to be animated. 
    var elements = $('.your-selector-here li').get(); 

    (function() { 
    // Take out the first element of array, animate it 
    // and pass this anonymous function as callback. 
    $(elements.shift()).slideDown('slow', arguments.callee); 
    })(); 
​ 

Answer 2

Vous devez utiliser la fonction de rappel pour animer le numéro suivant après la fin du premier. Voir le documentation.

Quelque chose comme:

$('firstNumber').slideDown('slow',function(){ 
    $('secondNumber').slideDown('slow'); 
}); 

Vous aurez besoin d'appeler cette récursive pour chacun des numéros.

Answer 3

Essayez ceci:

var index = 0; 

function animate() { 
    elem = $("div:eq(" + index + ")"); 
    elem.slideDown('slow'); 
    index++; 
    if (index < 10) { 
    setTimeout(animate, 500); 
    } 
} 

$(function(){ 

    for(var i = 1; i < 10 ;i++){ 
    var elem = $('<div>').html('Number : ' + i).appendTo($('body')).hide(); 
    } 
    animate(); 
}); 

Answer 4

Fondamentalement, vous devez joindre toutes les animations afin de queue de certains éléments pour les faire fonctionner de manière séquentielle

$(function(){ 
    $.each([1, 2, 3, 4, 5, 6, 7, 8, 9], function() { 
     var elem = $('<div>').html('Number : ' + this).appendTo($('body')).hide(); 
     $("body").queue(function(next) { 
      elem.slideDown('slow', next) 
     }); 
    }); 
}); 

Voici toutes les animations sont attachés à « corps », mais peut être n'importe quel élément. La syntaxe "next" est nouvelle dans jquery 1.4.