1

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

例子：这里

stackoverflow 上的所有其他解决方案都使用.stop()or .stop(true,true)，它适用于悬停触发的事件。但我不能将它用于滚动触发事件，因为它几乎完全消除了褪色效果。这是因为“悬停”只会触发一次事件，而“滚动”会触发多次相同的事件。

这个例子表明，如果我使用淡入淡出效果就消失了.stop(true,true)。

是否有任何解决方案可以在保持淡入淡出效果的同时重复淡入/淡出。

谢谢你。

4

1 回答 1

2

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

编辑：修复中断

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

于 2013-09-30T20:32:20.073 回答