2

私は非常に単純だと確信していることをしようとしています...私はゆっくりと自分自身にJQueryを教えているので、私は一日中フォーラムを読んでさまざまな用語をグーグルで検索していますが、それを実現できないようです！！

次のdivが上にスクロールしたときに（問題なく）左にスライドする（見えない）サインの画像が必要です...しかし、ユーザーが下にスクロールしたときにアクションを逆にしたいと思います。

このフィドルは最初のアニメーションを実現します：http：//jsfiddle.net/fr2Sw/

私は機能していないたくさんのメソッドを試しました...次のような関数：

var canSee = false;

$(window).scroll(function() {
    if ($(this).scrollTop() > 100) {
        $("#box").animate({left:"-=200px"});
        canSee = true;
    } else if (!canSee) {
        $("#box").animate({left:"=0px"});
    }
});

どうもありがとうございました、どんな助けでも大歓迎です！よろしければ、できれば「英語で」各関数で何が起こっているのか説明してください：o）

4

2 に答える 2

4

多分このようなもの：

var canSee = true;

$(window).scroll(function() {
    if ($(this).scrollTop() > 100 && canSee) {
        $("#box").animate({left:"-=200px"});
        canSee = false;
    } else if ($(this).scrollTop() <= 100 && !canSee) {
        $("#box").animate({left:"+=200px"});
        canSee = true;
    }
});

ユーザーが画像を見ることができるため、casSeeをtrueに初期化します。ユーザーがスクロールしたら、次の手順を実行します。

WindowsのscrollTopが100を超えていても画像が表示されている場合は、画面の外にスライドさせて非表示にします。これにより、1回だけ発生し、200pxを超えてスクロールすることはありません。ユーザーが上にスクロールして、画像がビューポートの外にあり、canSeeがfalseに設定されている場合は、画像をスライドさせて戻し、canSeeをtrueに設定します。これは、ユーザーが画像を表示できるためです。

于 2013-03-06T23:44:35.543 に答える
1

スクロールが上にあるときにのみ画像を表示する場合は、次を使用します。

$(document).ready(function () {
    $(window).scroll(function () {
        if ($(window).scrollTop() === 0) {
            $("#box").animate({
                left: "0px"
            });
        } else if ($("#box").css("left") == "0px") {
            $("#box").animate({
                left: -$("#box").width()
            });
        }
    });
});
于 2013-03-07T00:02:12.843 に答える