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 パラメータ 'Opacity' をターゲットにしておらず、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 に答える