1

我正在制作一个动画时间线(参见下面的 jsFiddle),其中的条目(左右交替)fade in在它们指定的delay. 这在for-loop 的帮助下。

如果支持不透明度,我将使用.animate({ opacity: 1 }). 否则.fadeIn()

使用.animate().fadeIn(),有时会跳过一个或多个条目的动画。注意:发生这种情况的可能性似乎很小。

所以我的意图是检查do-while主循环内的for, 条目是否确实可见,如果不可见,则再次运行动画。

但是,这似乎会导致无限循环。是否有更好的方法来检查并重新设置动画?

do-while我已经在下面的 jsFiddle 中注释掉了该部分。

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

1 回答 1

2

问题可能是因为您让 jQuery 在循环的每次迭代中查找条目,这需要时间,这可能是它有时会跳过条目上的动画的原因:

$('.timeline .entry').eq(i).delay(delays[i]).animate({opacity: 1}, 'slow');

最好尽量减少查询量,因为这是一项昂贵的操作。因此,只需找到元素一次,然后使用您已有的索引遍历它们:

var delays = [600, 950, 1200, 1550, 1750, 2300, 2600, 3100, 3750, 4200];
var entries = $('.timeline .entry');

for (var i = 0, numEntries = delays.length; i < numEntries; i++) {
    if (opacitySupport) {
        $(entries[i]).delay(delays[i]).animate({opacity: 1}, 'slow');
    } else {
        $(entries[i]).delay(delays[i]).fadeIn('slow');
    }
}

仅供参考,我使用[] 数组文字表示法而不是调用数组构造函数,因为我发现它不太容易混淆:http: //www.mattlunn.me.uk/blog/2012/04/the-use-of-literals-vs-构造函数/

于 2013-04-13T16:26:01.127 回答