jQuery函數適用於同一類的延遲

Question

好吧，我想是在這一個明確的...

我有一些insliding盒，都具有相同的類.box頁面加載時我想這些從左側滑入。這根據這個代碼完美的作品：

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

現在所有的箱子都在同一時間飛入。我想要的是，頂盒先走，第二個盒子稍後滑動，比第二個盒子晚三秒鐘，做出一種連鎖反應。

我該如何做到這一點，仍然保持一個類（保持動態）？

我也期待創造一個模糊到沒有模糊效果，如果任何人有一些想法也將是真棒，但它不是優先

編輯：用於測試的完整代碼：

<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

，如果你正在使用jQuery 1.4或更高版本很容易。

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

這是我實現的東西，基本上是你問的東西。我會研究更通用的解決方案並在準備就緒後發佈，但如果您有任何問題，請告訴我。

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}) 
    }) 
} 

下面是一個基於您的要求的通用解決方案。作爲第一個參數傳入你想要交錯的函數。請注意，這利用了jQuery動畫堆棧，因此如果您設置了jQuery.fx.off = true，則回調將立即執行。

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

下面是行動的功能：http://jsfiddle.net/V9NzR/

Answer 3

我的貢獻：

​$(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), []);   
    }); 
});​ 

鏈接：http://www.jsfiddle.net/zDSJ3/

Patricks的解決方案可能是最好的，我只是覺得做一些過於複雜的：P

Answer 4

修改您的jQuery這樣的代碼：

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

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

Here is the working demo.