Jquery effet d'animation question

Question

J'ai besoin d'aide à ce sujet sur comment puis-je animer les éléments suivants:

Si box1 fait en fondu 2000ms alors c'est le temps de commencer à animer le box2 le box3 et box4

 
$(document).ready(function(){ 
    $('#box1').fadeIn(2000); 
    $('#box2').fadeIn(2000); 
    $('#box3').fadeIn(2000); 
    $('#box4').fadeIn(2000); 
}); 

Comment puis-je faire cela, ou me donner un lien. Je suis Noob dans jquery

Merci à tous

Answer 1

La question est un peu claire mais, mais vous pouvez utiliser .delay() pour simplifier:

$(function() { 
    $('#box1').fadeIn(2000); 
    $('#box2').delay(2000).fadeIn(2000); 
    $('#box3').delay(2000).fadeIn(2000); 
    $('#box4').delay(2000).fadeIn(2000); 
}); 

See it in action here. Si vous vouliez dire un puis un autre, puis un autre, il suffit de changer le retard, comme celui-ci:

$(function() { 
    $('#box1').fadeIn(2000); 
    $('#box2').delay(2000).fadeIn(2000); 
    $('#box3').delay(4000).fadeIn(2000); 
    $('#box4').delay(6000).fadeIn(2000); 
}); 

See it in action here. Ou, raccourcir un peu avec .each() en utilisant le paramètre index passe à la fonction de rappel, comme ceci:

$(function() { 
    $('#box1, #box2, #box3, #box4').each(function(i) { 
    $(this).delay(2000*i).fadeIn(2000); 
    }); 
}); 

See it in action here. Ou, améliorer encore, en leur donnant une classe il est donc plus extensible, comme ceci:

$(function() { 
    $('.box').each(function(i) { 
    $(this).delay(2000*i).fadeIn(2000); 
    }); 
}); 

Test that version here :)

Answer 2

$(document).ready(function(){ 
    $('#box1').fadeIn(2000, function() { 
    $('#box2').fadeIn(2000, function() { 
     $('#box3').fadeIn(2000, function() { 
     $('#box4').fadeIn(2000); 
     }) 
    }) 
    }); 
}); 

Les fonctions d'animation prennent un second argument, qui est une fonction qui est appelée à la fin. Vous pouvez l'utiliser pour enchaîner des animations.

Bien que vous souhaitiez configurer ceci de façon à ce qu'il appelle récursivement une méthode où vous passez dans l'identifiant de boîte, et qu'il configure le suivant dans la chaîne jusqu'à ce que tout soit passé. est de 4 cases, alors le code ci-dessus est bien.