jQuery - 滚动上的淡出/“滚动停止”上的淡入

Posted 2023-03-05

【中文标题】jQuery - 滚动上的淡出/“滚动停止”上的淡入

【英文标题】：jQuery - fadeOut on Scroll / fadeIn on "scrollstop"

【发布时间】：2010-12-11 21:44:07

【问题描述】：

我有一个 div 定位工作，它被滚动事件触发。滚动事件被触发了很多次会导致闪烁的 div 会发生什么。我的计划是在不再触发滚动事件时淡出该 div 并淡入。如何检查滚动是否结束？我考虑了超时 滚动的组合，但实际上没有像我希望的那样起作用。这是我到目前为止所得到的。

$(document).ready(function()

    //var animActive = false;

    $(window).scroll(function() 

        /*
        if (animActive == false)
            animActive = true;
            $('.mceExternalToolbar').fadeOut(100, function () 
                $('.mceExternalToolbar').fadeIn(3000, function () 
                    animActive = false;
                    console.log("NOW");
                );
            );
        
        */

        topParentx = $('#tinyMCEwrapper').position().top;
        if ($(this).scrollTop() >= topParentx)
            $('.mceExternalToolbar').css('top', ($(this).scrollTop()-topParentx) + "px");
         else 
            $('.mceExternalToolbar').css('top', "0px");
        ;
    );

);

如您所见，我在其中留下了最后一次尝试，但是淡入淡出函数的回调没有按预期工作。

【参考方案1】：

修复滚动时不跳动！设置超时

var animActive = false;
$(window).scroll(function()
    if (animActive == false)
        animActive = true;
        $('#target').fadeOut(100, function () 
            var scrl = setTimeout( function()
            animActive = false;
            $('#target').fadeIn(500);
            , 2000);
        );
    
);

【参考方案2】：

您可以使用 jQuery 特殊事件来创建滚动停止事件。 James Padolsey 写了一篇很棒的 example of scrollstop event。

【参考方案3】：

好吧，虽然我昨天很高兴...今天现实又回来了... SAFARI 的反应是不重新渲染移动 div 后面的所有必要片段。特别是在 tinyMCE 的 iframe 上。 所以我最终得到了以下内容，并且效果很好。淡出 div -> 动画到位置 -> 仅在触发回调时淡入..

$(document).ready(function()

    $(window).scroll(function() 

        topParentx = $('#tinyMCEwrapper').position().top;

        var topTarget = "0px";

        if ($(this).scrollTop() >= topParentx)
            topTarget = ($(this).scrollTop()-topParentx) + "px";
            $('.mceExternalToolbar').animate(opacity: 0, 1);
        
        $('.mceExternalToolbar').stop().animate(top: topTarget, 200, 'swing', function()
            $('.mceExternalToolbar').animate(opacity: 1, 100, 'swing');

        );

    );

);

【参考方案4】：

不幸的是，没有滚动停止的概念，因此您无法真正从中触发动画。更好的做法是为您的 div 的“顶部”属性设置动画，以便它平滑地滑动到新位置而不是闪烁。

        topParentx = $('#tinyMCEwrapper').position().top;
        var topTarget = "0px";
        if ($(this).scrollTop() >= topParentx)
            topTarget = ($(this).scrollTop()-topParentx) + "px";
        
        $('.mceExternalToolbar').stop().animate(top, topTarget, 500);

【讨论】：

嘿，谢谢...这不是我的计划，但我必须承认，它的工作要好得多...尤其是从来没有偶然发现 stop() 函数，在这种情况下非常方便。 ..所以谢谢...为了使您的示例与我的jquery版本一起使用，需要快速查看参考wwas，因为必须将css定义称为： $('.mceExternalToolbar').stop().animate(顶部：顶部目标，200）；谢谢！！！这对我帮助很大！！！

很高兴它对你有用，感谢更新和代码修复。我已经更新了我的代码。