在div上应用CSS'fadeInDown'动画会停止jQuery'Scroll to Fade'处理相同的div

Question

有谁知道为什么在div上应用CSS'fadeInDown'动画会阻止jQuery'Scroll to Fade'在同一个div上工作？

我正在研究一个交互式信息图，并希望使用CSS fadeInDown淡出一段文本，但也可以在使用时滚动淡出。滚动的jQuery淡入淡出适用于div，直到我添加CSS'fadeInDown'。这是我遇到http://itssjp.co.uk/infographic/

问题的部分的链接

Answer 1

如果您修改子元素的不透明度属性而不是动画父级，则看起来像是不透明度堆栈。

$(window).bind('scroll', function(){
    var offset = $(document).scrollTop()
        ,opacity=0
    ;
    if( offset<=fadeStart ){
        opacity=1;
    }else if( offset<=fadeUntil ){
        opacity=1-offset/fadeUntil;
    console.log(opacity);
    }
    headintro.children().css('opacity',opacity);
});