1

私は 3 つの DIV を持っています。私がやろうとしているのは、ユーザーがそれらの DIVを次々と下にスクロールすると表示され、上にスクロールすると消えてしまうことです。最初の 2 つの DIV は正常に機能していますが、3 番目の DIV は機能していません。

これは私が試したものです:

$(window).scroll(function () {
    if ($(window).scrollTop() > 100) {
        $("#one").fadeIn(5000);
        $('#two').next().fadeIn(5000);
        $('#three').next().fadeIn(5000); 
    }
});
$(window).scroll(function () {
    if ($(window).scrollTop() < 100) {
        $("#one").fadeOut(10);
        $('#two').next().fadeOut(10);
        $('#three').next().fadeOut(10);
    }
});

そして、これがサンプルです。

修正または提案はありますか？

4

3 に答える 3

1

の問題は別として、.next()コードを次のように書き直します。

$(window).scroll(function () {

    if ($(window).scrollTop() > 100) {

        $('#test').animate({opacity:1}, 5000);

    } else {

        $('#test').stop(true, false).css({'opacity':0});
    } 
});

見やすくて分かりやすいと思います。HTML の場合は、コード サイズを縮小するためだけにラッパー (ここでは test と呼ばれます) を追加します。jsFiddleはこちら

于 2013-03-22T08:24:32.537 に答える
1

これを試してください：

$(window).scroll(function () {
    if ($(window).scrollTop() > 100) {
        $("#one").fadeIn(5000).next().fadeIn(5000).next().fadeIn(5000); 
    }
});
$(window).scroll(function () {
    if ($(window).scrollTop() < 100) {
        $("#one").fadeOut(10).next().fadeOut(10).next().fadeOut(10);
    }
});
于 2013-03-22T08:16:11.447 に答える
1

は、必要なものではなく次のnext()ものを選択しているため、実際には、フェードイン、フェードイン、フェードイン後のことを言っています。アウトも同じです。すべてを削除して、希望どおりに動作するかどうかを確認します。divonethreethree.next()

編集:スクロールしたときにそれらを表示したいと言いましたが、jQuery Waypointsを使用してみてください。例はhttp://jsfiddle.net/EqYsy/28/です

$('.fadeClass').waypoint(function(direction){
  if(direction == "down")
    $(this).animate({opacity:1}, 5000);
  else if(direction == "up")
    $(this).animate({opacity:0}, 1000);
},{offset:500});
于 2013-03-22T07:56:51.583 に答える