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

我认为fadeTo可以在这里提供帮助

https://api.jquery.com/fadeTo/

小提琴链接https://jsfiddle.net/arunzo/pgs9nf0h/

$(window).scroll(function () {
    if ($(this).scrollTop() > 100) {
        $('#back-top').fadeTo("fast", 0.6);
    } else {
        $('#back-top').fadeTo("fast", 0);
    }
});

$('#back-top').hover(function () {
    $(this).fadeTo("slow", 1);
    }, function () {
    $(this).fadeTo("slow", 0.6);
});

由于浏览器兼容性原因，我将hover作为Jquery函数附加。但另一个答案仍然是更优雅。

Answer 2

你认为你可以添加/删除课程

是正确的

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/

使用不透明度过渡淡入/淡出不能按预期工作

2 个答案: