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'}, 
       }); 
     }); 
    } 
});

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

來源

2011-07-03 rick

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

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

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

來源

2011-07-03 10:18:20 Erric

由於排隊是每個元素，沒有什麼是實際排隊在這裏，這就是爲什麼他們都在一次動畫。有幾種方法可以做到這一點。一個簡單的辦法用小數量的項目要做到這一點是.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。

來源

2011-07-03 11:07:36

對我很好。謝謝。 – bobsouza

這是我用於連續動畫：

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

來源

2012-11-24 19:50:19 alieninlondon

jQuery的連續動畫

回答

相關問題