jquery - 淡入/淡出不透明过渡不能按预期工作

Question

这是我的代码:

$(document).ready(function () {

    $("#back-top").hide();

    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() > 100) {
                $('#back-top').fadeIn();
            } else {
                $('#back-top').fadeOut();
            }
        });
    });
});

还有 CSS:

#back-top
{
    opacity: 0.6;
    transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
}

#back-top:hover
{
    opacity: 1.0;
    transition: opacity .55s ease-in-out;
    -moz-transition: opacity .55s ease-in-out;
    -webkit-transition: opacity .55s ease-in-out;
}

所以这就是问题所在:当我像这样组合我的 CSS 和 jQuery 时，#back-top 元素在需要时既不会淡入也不会淡出。它会在滚动功能触发的那一刻凭空出现，没有任何效果。因此，如果我删除 CSS，淡入/淡出就会起作用。如何组合两部分代码，以便当元素淡入时，它仅淡入 opacity: 0.6; 然后停止。悬停时，它应该具有 opacity: 1; 并且在超出滚动功能范围时仍然能够淡出。我认为必须有一个只有 CSS 的方法，jQuery 只是在函数激活时添加类......但我还没有弄清楚......

Answer 1

你的假设是正确的，你可以添加/删除类

HTML(用于演示)

<div style="height: 200vh;">
    <div id="back-top" class="fadeable invisible"></div>
</div>

CSS

.fadeable {
    transition: opacity .55s ease-in-out;
    -moz-transition: opacity .55s ease-in-out;
    -webkit-transition: opacity .55s ease-in-out;
}

.semi-transparent {
    opacity: 0.6;
}

.invisible {
    opacity: 0 !important;
}

#back-top {
    position: fixed;
    width: 100px;
    height: 100px;
    background-color: black;
}

#back-top:hover {
    opacity: 1.0;
}

JS

$(window).scroll(function () {
    if ($(this).scrollTop() > 100) {
        $('#back-top').addClass("semi-transparent");
        $('#back-top').removeClass("invisible");
    } else {
        $('#back-top').removeClass("semi-transparent");
        $('#back-top').addClass("invisible");
    }
});

工作 JSFiddle:https://jsfiddle.net/xx5k363n/12/