链路衰落的奇怪行为

Strange behavior of link fading

本文关键字：链路      更新时间：2023-09-26

我正在为我的个人网页创建一个"滚动到顶部"链接，但是我遇到了一些奇怪的行为，我似乎无法纠正。

我希望链接在用户滚动到一定像素时淡入，然后在用户向上滚动到该点以上时再次淡出。非常标准的行为。

标记非常简单:

<a href="#home" id="scroll-top" class="scroll"></a>
CSS: 

#scroll-top {
    position: fixed;
    right:30px;
    bottom:30px;
    width: 30px;
    height:30px;
    color: #38555e;
    z-index: 99;
    border-radius: 50%;
    border:2px solid #38555e;
    text-align: center;
    background:#fff;
    -webkit-transition:all 0.2s linear;
    -moz-transition:all 0.2s linear;
    -o-transition:all 0.2s linear;
    transition:all 0.2s linear;
    display:none;
}
#scroll-top:hover {
    background:#38555e;
    color:#fff;
    border-color:#fff;
}

和Jquery代码:

$(window).scroll(function () {
        if(!( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) )) {
            if ($(this).scrollTop() > 100) {
                $('#scroll-top').fadeIn(2000);
            } else {
                $('#scroll-top').fadeOut(2000);
            }
        }
    });

演示:http://jsfiddle.net/chc91n5f/4/

我的问题是，当链接褪色时，它等待大约2秒，然后快速褪色，而不是立即开始褪色，慢慢褪色。此外，当链接淡出时，它会等待，然后快速淡出。

我在这里错过了什么?

jQuery中的fadeIn和fadeOut函数是不透明度动画的简写。

jQuery将属性动画化，将它们内联并改变它，直到达到特定的点。在你的例子中，它将不透明度更改为0.35677，并且浏览器会将此更改动画化。

为了有一个更圆滑的动画使用CSS类(例如可见)来修改不透明度。

body {
    height:2000px;
    background:red;
}
#scroll-top {
    position: fixed;
    right:30px;
    bottom:30px;
    width: 30px;
    height:30px;
    color: #38555e;
    z-index: 99;
    border-radius: 50%;
    border:2px solid #38555e;
    text-align: center;
    background:#fff;
    -webkit-transition:all 0.2s linear;
    -moz-transition:all 0.2s linear;
    -o-transition:all 0.2s linear;
    transition:all 0.2s linear;
    opacity: 0;
}
#scroll-top:hover {
    background:#38555e;
    color:#fff;
    border-color:#fff;
}
#scroll-top.visible {
    opacity: 1;
}

并使用以下代码更改它:

if ($(this).scrollTop() > 100) {
    $('#scroll-top').addClass('visible');
} else {
    $('#scroll-top').removeClass('visible');
}

我认为问题出在你的滚动功能上。

用最简单的解释。

当你滚动时(滚动轮的一个刻度)，代码会检查你是否超过了100px。在大多数基本的浏览器和操作系统的滚动距离是122px(纠正我，如果我错了)。问题是. .如果你用鼠标滚轮滚动3次。当你超过100px 3次时，fadeIn的动画将排队3次。在某种程度上，jQuery受够了它，然后说……如果你想要相同的长动画多次。我会跳过几次来分散我的工作量。

简单的解释到此为止。

你可以禁用这个clearQueue (http://api.jquery.com/clearqueue/)，它将禁用闪烁动画。编辑如下

 $(window).scroll(function () {
    if(!( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) )) {
        if ($(this).scrollTop() > 100) {
            $('#scroll-top').animate({opacity: 1},1000).clearQueue();
            console.log("test");
        } else {
            $('#scroll-top').animate({opacity: 0},1000);
        }
    }
});

演示:http://jsfiddle.net/2uox7ep7/5/

这是因为当你滚动时，它一直在淡出，即使它已经在淡出，因此延迟。您可以使用像visible这样的变量来跟踪可见性http://jsfiddle.net/chc91n5f/7/

相关文章：