jQuery waypoints延迟 [英] jQuery waypoints delays

问题描述

我有三个元素，当我滚动到它们时，我想要 fadeInUp 。但是，现在是延迟部分，我希望两个元素在第一个元素出现后出现。但问题是，这并不像预期的那样发生，它们都在同时出现。
这是小提琴：小提琴

我希望两个黄色圆圈分别出现在第一个黄色圆圈后面，延迟时间分别为0.5秒和1秒。我尝试在元素中添加类delay-05s和delay-1s，但出于某种原因，这不会发生。
此外，这里有一个模板，我试图模仿，去那里，你会看到： Halcyon Days BootStrap模板

解决方案

添加类来使用CSS动画延迟是正确的选择，但这些类没有在任何地方定义！

只需包含一些CSS即可应用动画延迟：

 。 delay-05s {
 -webkit-animation-delay：0.5s; 
动画延迟：0.5s; 
} 
 
 .delay-1s {
 -webkit-animation-delay：1s; 
 animation-delay：1s; 
} 
  

http://jsfiddle.net/4FNFW/141/

I have three elements that I want to fadeInUp when I scroll over to them. But, now comes the delay part, I want the two elements appear after the first one has appeared. But, the problem is that, it's not happening as expected, they are all showing up at the same time. Here's the fiddle : Fiddle

I want the two yellow circles to appear after the first one with delays of 0.5s and 1s respectively. I've tried adding the class "delay-05s" and "delay-1s" to the elements but for a reason, It's not happening. Also, here's a template that I'm trying to mimic, go over there and you'll see : Halcyon Days BootStrap Template

解决方案

You are very nearly there.

Adding classes to use CSS animation delays was the right way to go, but those classes weren't defined anywhere!

Just include some CSS to apply the animation delays:

.delay-05s {
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}

.delay-1s {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

http://jsfiddle.net/4FNFW/141/

这篇关于jQuery waypoints延迟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！