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

我正在制作一个交互式信息图,并希望使用CSS fadeInDown淡出一段文本,但也希望在滚动时淡出一段文本。滚动上的jQuery淡入效果在div上适用得很好,直到我添加CSS'fadeInDown'。这是我遇到http://itssjp.co.uk/infographic/问题的部分的链接

最佳答案

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

$(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);
});

关于jquery - 在div上应用CSS'fadeInDown'动画会停止在同一div上运行jQuery'Scroll to Fade',我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/20205421/

10-09 15:10