fonction jquery application à la même classe avec un retard

Question

D'accord, je suis en train d'être clair sur celui-ci ...

J'ai quelques boîtes de insliding, tous avec la même classe .box Lorsque la page se charge que je veux ceux-ci glissent de la gauche. Cela fonctionne parfaitement selon ce code:

$(document).ready(function(){ 
    $(".box").animate({left: "-=920px", opacity: "1"}, 1250) 
    return false; 
}); 

Maintenant toutes les boîtes volent en même temps. Ce que je veux, c'est que la boîte du dessus passe en premier, et la seconde boîte glisse une seconde plus tard, et la troisième une seconde plus tard que la seconde, ce qui crée une sorte de réaction en chaîne.

Comment puis-je y parvenir, et toujours garder une classe (pour garder les choses dynamiques)?

Je cherche aussi à créer un flou sans flou effet, si quelqu'un a des idées sur cela aussi serait génial, mais ce n'est pas la priorité

Edit: Code complet pour les tests:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> 

<script type="text/javascript"> 
$(document).ready(function(){ 
    $(".box").animate({left: "-=920px", opacity: "1"}, 1250) 
    return false; 
}); 
</script> 

<style type="text/css"> 
.box { 
    background: #6699FF; 
    height: 100px; 
    width: 100px; 
    position: relative; 
    margin-left: 920px; 
    opacity: 0.0; 
} 
#main_box{ 
    overflow: hidden; 
    padding: 5px; 
    border: 3px solid; 
} 
</style> 

<div id="main_box"> 
    <div class="box"> 
    </div> 
    <div class="box"> 
    </div> 
    <div class="box"> 
    </div> 
</div> 

Answer 1

Il est facile si vous utilisez jQuery 1.4 ou plus tard.

http://jsfiddle.net/9GjsC/

$(".box").each(function(index) { 
    $(this).delay(index * 1000).animate({left: "-=920px", opacity: "1"}, 1250); 
}); 

• http://api.jquery.com/delay/

Answer 2

Voici ma mise en œuvre de quelque chose qui est essentiellement ce que vous demandez. Je vais travailler sur une solution plus générale et la poster quand c'est prêt, mais si vous avez des questions, faites le moi savoir.

jQuery.fn.staggeredAnimate = function() { 
    // initialize array of offsets 
    var off = [] 

    // add each element's aggregate offset to the offsets array 
    this.each(function(){ 
    off.push($(this).offset().left + $(this).offset().top) 
    }) 

    // find the maximum and minimum offsets 
    var omax = Math.max.apply(Math, off) 
    var omin = Math.min.apply(Math, off) 

    // fade in each element in a timing relative to the offsets 
    return this.each(function(){ 
    var ratio = ($(this).offset().left + $(this).offset().top - omin)/omax 
    var delay = 500 * (ratio) 
    $(this).delay(delay).animate({opacity: 1}) 
    }) 
} 

Voici une solution générale basée sur vos besoins. Passez simplement la fonction que vous voulez décalée comme premier argument. Notez que cela profite de la pile d'animation jQuery, donc si vous définissez jQuery.fx.off = true, les callbacks s'exécuteront tous immédiatement.

jQuery.fn.staggeredAnimate = function(func, delay) { 
    if(delay == undefined) delay = 500; 
    return this.each(function(i){ 
    $(this).animate({dummy: 1}, delay * i, func); 
    }); 
} 

est ici la fonction en action: http://jsfiddle.net/V9NzR/

Answer 3

Ma contribution:

​$(function(){ 
    var move = function(){ 
     var self = this; 
     move.delay = move.delay ? move.delay+=1000 : 1; 

     setTimeout(function(){ 
      self.animate({ 
       left: '+=500' 
      }, 1000); 
     }, move.delay); 
    };  

    $('.box').each(function(){ 
     move.apply($(this), []);   
    }); 
});​ 

Lien: http://www.jsfiddle.net/zDSJ3/

Patricks solution pourrait être le meilleur, je me sentais comme faire quelque chose overcomplicated: p

Answer 4

Modifier votre code jquery comme ceci:

var boxes = $('.box'); 
i = 0; 

$(document).ready(function(){ 
    $(boxes[i++] || []).animate({left: "-=920px", opacity: "1"}, 1250, arguments.callee) 
}); 

Here is the working demo.