Javascript CSS中的渐变过渡元素

我正在CSS中的导航栏上工作。当前，当用户滚动时，我的徽标（

#cos_logo

）立即消失。我更喜欢它通过CSS转换慢慢消失

有人能解释一下我是如何用现有代码实现这一点的吗

$（窗口）。滚动（函数（）{
$（'#header_nav'）.toggleClass（'scrolled'，$（document.scrollTop（）>0）；
});
标题导航{
背景：1588cb；
宽度：100%；
高度：100px；
位置：固定；
z指数：2；
排名：0；
左：0；
}
身体{
高度：1000px
}
导航{
高度：100px
}
导航ul{
位置：绝对位置；
底部：0；
边际：0px；
右：0px；
过渡：0.3s；
}
#标题导航{
高度：100px；
过渡：高度。600秒；
}
#标题导航已滚动{
高度：78px；
}
#标题导航滚动ul菜单主菜单{
底部：45%；
}
#cos_标志{
填充：25px0；
浮动：对；
}
#标题_导航滚动#cos_徽标{
显示：无
}




您不能像在JavaScript中那样在CSS中为显示切换设置动画。只需在此处使用
opacity
即可：

#cos_logo {
    transition: opacity .5s;
}

#header_nav.scrolled #cos_logo {
    opacity: 0;
}

演示：

您也可以使用jQuery：

$(window).scroll(function() {
    $('#cos_logo').fadeOut(500);
});

演示：
您可以使用jQuery进行转换吗？如果可以，我想：-）您可以解释一下我将如何进行转换吗？非常感谢！如果我要使用JS，我会怎么做呢？
.fadeIn（）
和
.fadeOut（）
，不过这是jQuery。还请注意，
opacity
只会切换元素的不透明性，文字元素将出现在页面上，而不像
display:none@michaelmcgurk我用另一种jQuery方法更新了我的答案。非常感谢！当我向上滚动时，它能重新显示吗？：）不客气。如果我的答案被接受，那就太好了