0

我正在尝试将我在这里找到的 Stackoverflow 问题中的代码与我自己的代码结合起来。基本上，当#findme 跨度在浏览器中时，我希望它从上到下一个接一个地开始淡入跨度（如上一篇文章所述，使用 Genericrich 提供的代码）。

我设置的小提琴在这里。

这是我的 js，我似乎无法弄清楚我做错了什么？

$(window).scroll(function () {
if (!spanSeen && isScrolledIntoView('#findme')) {

    //What I want to happen when the span element is in view
    $("span").each(function (index) {
        $(this).delay(400 * index).fadeIn(300);
    });
    run = true;
    }
});

var spanSeen = false;

function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
     var docViewBottom = docViewTop + $(window).height();

     var elemTop = $(elem).offset().top;
     var elemBottom = elemTop + $(elem).height();

     return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
 }

我是 JS 的新手，慢慢地学习一点点，谢谢。

4

1 回答 1

0

回答我自己的问题，以防其他人看到这篇文章。

在更改了一些代码后，我意识到这是我自己的错误，而不是针对 css 参数“不透明度” - 错误地使用了 fadeIn。我认为这是正确的，如有必要，请进行修改。

正确的JS代码是：

$(window).scroll(function () {
if (!spanSeen && isScrolledIntoView('#findme')) {

    //What I want to happen when the element is in view
    $("span").each(function (index) {
        $(this).delay(400 * index).animate({opacity: 1}, 500);
    });
    run = true;
}
});

var spanSeen = false;

function isScrolledIntoView(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();

var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();

return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
于 2013-10-20T15:26:12.743 回答