Question

我使用此功能在用户向下滚动时逐渐淡化徽标：

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

这两个函数发生冲突，如果用户完全滚动，则会在切换后显示徽标...如何让这两个函数同时修改一个元素的不透明度而不相互抵消？< / p>

（我修改的元素既有id＆amp;类＆＃39; logo-black＆＃39;）

Answer 1

使用优先权覆盖

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

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

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

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

1 个答案: