javascript - 使用两个jQuery函数同时更改单个元素的不透明度？

当用户向下滚动时，我正在使用此功能逐渐淡出徽标：

$(window).scroll(function(){
    var scroll = $(window).scrollTop();
    $('#logo-black').css({'opacity':(( 60-scroll )/60)});
});

切换按钮时，我需要完全淡出同一徽标，所以我这样做了：

jQuery的

$("#button").click(function() {
    $('.logo-black').toggleClass('logo-black-active');
});

的CSS

.logo-black{
    opacity: 1;
}
.logo-black-active{
    opacity: 0;
}
.logo-black-hide{
    -webkit-transition: all .2s cubic-bezier(0.17, 0.04, 0.03, 0.94);
    -moz-transition: all .2s cubic-bezier(0.17, 0.04, 0.03, 0.94);
    -o-transition: all .2s cubic-bezier(0.17, 0.04, 0.03, 0.94);
    -ms-transition: all .2s cubic-bezier(0.17, 0.04, 0.03, 0.94);
    transition: all .2s cubic-bezier(0.17, 0.04, 0.03, 0.94);
}

这两个功能发生冲突，如果用户完全滚动，则徽标会在切换后显示出来。如何获得这两个功能，以同时修改一个元素的不透明度而又不互相抵消呢？

（我正在修改的元素的ID和类均为'logo-black'）

最佳答案

使用优先级覆盖

.logo-black.logo-black-active { opacity: 0; }

但是.css()会添加优先级高的内联CSS规则，因此请更改选择器

$('#logo-black:not(.logo-black-active)').css({'opacity':(( 60-scroll )/60)});

关于javascript - 使用两个jQuery函数同时更改单个元素的不透明度？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44153708/