Question

所有其他解决方案都有鼠标悬停触发的FadeIn / FadeOut事件。每当我们滚动时都会触发我的事件。

示例：here

stackoverflow上的所有其他解决方案都使用.stop()或.stop(true,true)，它适用于悬停触发事件。但我无法将其用于滚动触发事件，因为它几乎完全消除了褪色效果。这是因为＆＃34; hover＆＃34;只触发一次事件，但是＆＃34;滚动＆＃34;多次触发同一事件。

This示例显示，如果我使用.stop(true,true)，淡入淡出效果就会消失。

是否存在任何解决方案，使fadeIn / fadeOut在保持褪色效果的同时重复播放。

谢谢。

Answer 1

我会使用：动画选择器仅在静止时运行淡入淡出动画，确保动画不会中断或排队。见下文

编辑：修复中断

$(function () {
    $("#id_home").hide();
    var offset_top = 100;
    var check_div = function (verify) {
        var scroll_top = $(window).scrollTop();
        if (!$("#id_home:animated").length || verify) {
            if (scroll_top > offset_top) {
                $("#id_home").fadeIn(1300, function () {
                    if (!verify) check_div(true);
                });
                //$("#id_home").fadeIn(1000);
            } else {
                $("#id_home").fadeOut(1300, function () {
                    if (!verify) check_div(true);
                });
                //$("#id_home").fadeOut(1000);
            }
        }
    }
    // run our function on load
    check_div(false);

    // and run it again every time you scroll
    $(window).scroll(function () {
        check_div();
    });
});

http://fiddle.jshell.net/LFqMJ/4/

停止fadeIn和fadeOut重复多次（通过滚动触发事件，而不是悬停）

1 个答案: