不透明过渡的淡入/淡出无法按预期工作答案

【问题标题】：Fade in/fade out with opacity transition doesn't work as expected不透明过渡的淡入/淡出无法按预期工作
【发布时间】：2015-07-06 23:48:57
【问题描述】：

这是我的代码：

$(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只是在函数激活时添加类......但我还没有弄清楚......

【问题讨论】：

尝试使用fadeTo()
对以下答案的评论：您正在尝试使用 CSS（过渡）和 jQuery（淡入/淡出）为元素设置动画，您必须选择一种解决方案，但不要同时选择两者其中。
@enguerranws 为什么不呢？统计数据显示，人们更有可能从外观精美的网站购买商品。
我同意这一点，我的意思是：如果你想做花哨的动画，只需使用 CSS 过渡或 JS 动画，而不是在同一元素上同时使用这两种技术。在上面的示例中，这就是您要实现的目标。

标签： jquery css

【解决方案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;
}

$(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/

【讨论】：

那么.fadeable呢？
所有淡入淡出的做法是添加 CSS 属性，使其淡出而不是立即切换。高度、宽度和背景颜色只是为了让 div 显示出来
好的。这种工作。我所要做的就是注释掉$('#back-top').hide(); 部分。但是现在当我重新加载页面时，按钮会显示在我网站的顶部。如果我向下滚动然后备份它会消失，但这仍然不是我们想要的行为，对吧？
从.fadeable 和任何其他样式中删除position: fixed。当你向下滚动它应该会出现，然后向上滚动它会消失。
除了#back-top 下的样式会改变元素的位置之外，我的代码中没有任何内容。当您向上滚动到每个问题的顶部 100 像素以内时，它应该会消失。

【解决方案2】：

我认为 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);
});

出于浏览器兼容性的原因，我已将悬停作为 Jquery 功能附加。但另一个答案仍然更优雅。

【讨论】：

Uuum...由于某种原因，这对我不起作用。我可以看到按钮淡入然后淡出，当我向下滚动时它消失了？
很抱歉。检查它。