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

我希望这会有所帮助。