我正在制作一个动画时间线(参见下面的 jsFiddle),其中的条目(左右交替)fade in
在它们指定的delay
. 这在for
-loop 的帮助下。
如果支持不透明度,我将使用.animate({ opacity: 1 })
. 否则.fadeIn()
。
使用.animate()
和.fadeIn()
,有时会跳过一个或多个条目的动画。注意:发生这种情况的可能性似乎很小。
所以我的意图是检查do-while
主循环内的for
, 条目是否确实可见,如果不可见,则再次运行动画。
但是,这似乎会导致无限循环。是否有更好的方法来检查并重新设置动画?
do-while
我已经在下面的 jsFiddle 中注释掉了该部分。
提前致谢。
更新jsFiddle,感谢sweetamylase。
更新 2:我注意到我的代码的另一部分,.hover()
即条目上的一个事件,如果在加载时间线时我的光标位于条目上,它们就不会出现。这是由于.stop(1, 1).animate()
在我的代码的那一部分中使用了。
$('.timeline .entry').hover(function() {
$(this).stop(1, 1).animate({backgroundColor: '#f3f3f3'}, 350);
}, function() {
$(this).stop(1, 1).animate({backgroundColor: '#f8f8f8'}, 350);
});
我怎样才能.stop(1, 1)
在这部分中仍然使用,以便在快速悬停时不会建立那些悬停动画?
更新 3:我只使用 a now,仅在指定时间后setTimeout()
允许事件。.hover
setTimeout(function() {
$('.timeline .entry').hover(function() {
$(this).stop(1, 1).animate({backgroundColor: '#f3f3f3'}, 350);
}, function() {
$(this).stop(1, 1).animate({backgroundColor: '#f8f8f8'}, 350);
});
}, 6000);