将 css 动画与页面加载同步

Question

我知道有很多这样的问题，但没有一个真正回答我的问题。 我已经用 css 动画制作了一个预加载器，我想与页面加载同步。我可以在页面加载时触发动画，但我想以某种方式管理动画持续的时间，以便准确地跟随页面加载（即使它太快）。

一个例子：http://jsfiddle.net/RgPU7/

我希望“填充”效果跟随页面加载时间。

现在我只是对包装 css 动画的模态应用延迟和淡出效果。

jQuery(window).load(function(){
  $(".modal").delay(3000).fadeOut(1000);
});

任何建议都会很棒。谢谢！

Answer 1

你总是可以延迟这样的功能

setTimeout(function() { your_func(); }, 5000);

或者你可以这样做

$(this).fadeOut(500, function(){
   //Do something 
   $(this).fadeIn(700);
});

我希望这会有所帮助。