2011-07-03 122 views
3

我試圖複製這個動畫jQuery的連續動畫

http://tympanus.net/Tutorials/AnimatedContentMenu/

我不能動畫菜單項,不是按順序

$('#bar').animate(
    {width: '100%'}, 
    {duration: 500, 
    specialEasing: {width: 'linear'}, 
    complete: function() { 
     $('li').each(function() { 
       $(this).animate(
        {top:'0px'}, 
        {queue: true, duration: 200, specialEasing: {top: 'easeOutBack'}, 
       }); 
     }); 
    } 
}); 

向上滑動這樣的菜單項目同時動畫.....有什麼不對?

+0

感謝尼克,你的拳頭的解決方案,做工精細!第二個會更好,但不適合我......但我對第一個解決方案感到滿意。再次感謝。 – rick

+0

我正在尋找和這個問題非常類似的東西,所以我創建了一個小的Jquery插件(https://github.com/fillswitch/Jquery-Sequential-Animations)。希望它能幫助別人! –

回答

0

隊列對於每個元素都是唯一的,這意味着每個元素都有自己的獨立隊列。 動畫完成後爲每個項目使用回調。 示例:如果您有五個li標籤,請爲前四個標籤使用特定的類,併爲該類的動畫添加回調以執行下一個元素的動畫。

10

由於排隊是每個元素,沒有什麼是實際排隊在這裏,這就是爲什麼他們都在一次動畫。有幾種方法可以做到這一點。一個簡單的辦法用小數量的項目要做到這一點是.delay(),像這樣:

$('#bar').animate(
    {width: '100%'}, 
    {duration: 500, 
    specialEasing: {width: 'linear'}, 
    complete: function() { 
     $('li').each(function(i) { 
      $(this).delay(i*200).animate(
       {top:'0px'}, 
       {queue: true, duration: 200, specialEasing: {top: 'easeOutBack'}, 
      }); 
     }); 
    } 
}); 

You can test a demo out here

這樣做的效果是延遲動畫200ms * .each()迭代中元素的索引,所以第一個動畫是瞬間的,第二個200ms以後,接下來的200ms等。我推薦這個的原因是你不要使用200毫秒的延遲,你可以使用一個較小的數字,並有動畫重疊一點,這似乎是你的影響。

另一種方式(只有更詳細的,連續的,並允許無重疊)做到這一點是使用.queue()建立你自己的,例如:

$('#bar').animate(
    {width: '100%'}, 
    {duration: 500, 
    specialEasing: {width: 'linear'}, 
    complete: function() { 
     $('li').each(function() { 
      $(document).queue(function(n) { 
       $(this).animate(
       {top:'0px'}, 
       {queue: true, duration: 200, specialEasing: {top: 'easeOutBack'}, 
       complete: n //call the next item in the queue    
       }); 
      }); 
     }); 
    } 
}); 

You can test that version out here

+0

對我很好。謝謝。 – bobsouza

0

這是我用於連續動畫:

for (var i = 1; i < 10; i++) { 
    $('#bullet-' + i).delay(i * 1000 - 1000).fadeIn('fast', function() { 
     var id = this 
     setTimeout (function() {$(id).css('color', 'lightgray');}, 1500); 
    }); 
}