0

私が取り組んでいるサイトでは、スクロールして表示される要素にクラスを追加する必要があります。これが機能する必要があるページには複数の要素があります。

それがどのように機能するかを表示するフィドルをセットアップしました：http://jsfiddle.net/e8qX9/35/

以下は私に問題を引き起こしている部分です：

if ($('#one').doesExist()) { // checks if element exists
    $(window).scroll(function () { // on scroll
        addInView('#one', 'slideleft', 0.2); // run function with params
    });
    addInView('#one', 'slideleft', 0.2); // run function again on page load
}

if ($('#two').doesExist()) {
    $(window).scroll(function () {
        addInView('#two', 'slideright', 0.5);
    });
    addInView('#two', 'slideright', 0.5);
}

if ($('#three').doesExist()) {
    $(window).scroll(function () {
        addInView('#three', 'slideup', 0.2);
    });
    addInView('#three', 'slideup', 0.2);
}

if ($('#four').doesExist()) {
    $(window).scroll(function () {
        addInView('#four', 'slidedown', 0.5);
    });
    addInView('#four', 'slidedown', 0.5);
}

if ($('#five').doesExist()) {
    $(window).scroll(function () {
        addInView('#five', 'slideleft', 0.2);
    });
    addInView('#five', 'slideleft', 0.2);
}

ページの読み込み時とスクロール時の両方で、この関数を複数回実行するより良い方法があるかどうか疑問に思っていました。多次元配列を作成してループすることを考えましたが、頭がよくわかりません。

ありがとう

4

2 に答える 2

0

さて、配列のループ部分では、これを持つことができます

$('section[id]').each(function(i, e){
    $(window).scroll(function() {
        addInView(e, 'slideleft', 0.2);
    });
    addInView(e, 'slideleft', 0.2);
});

section[id] は、id を持つすべてのセクション要素に一致します。css クラスを使用し、id をできるだけ避けるようにしてください。

each は、i = インデックスおよび e = 要素の関数を使用して、これらの要素を反復処理します。

それ以外は、ウィンドウに要素ごとにスクロール イベントを登録していますが、これは良くありません。イベントを 1 つだけ登録し、そこで必要な作業を行うことが望ましいです。別のイベントタイプを見つけるかもしれません（これが機能するかどうかはわかりませんhttp://api.jquery.com/visible-selector/）

于 2013-11-20T12:16:45.847 に答える
0

(関数($){

$.fn.gAppear = function(options){

    var defaults = {
        slideDuration: 0.2,
        slideDirection: "slideleft"
    };

    options = $.extend(defaults, options);

    var appear = $(this); 

    $(window).scroll(function () {
        addInView(appear, defaults.slideDirection, defaults.slideDuration);
    });
   addInView(appear, defaults.slideDirection, defaults.slideDuration);


    function isScrolledIntoView(elem, vpoffset) {    
        var docViewTop = $(window).scrollTop();
         //$(elem).text(docViewTop);
        var docViewBottom = docViewTop + $(window).height();
         //$(elem).text(docViewBottom);
        var elemTop = $(elem).offset().top + ($(elem).height()*vpoffset);
        $(elem).text(docViewBottom+" "+elemTop);
        return (docViewBottom >= elemTop);

    }

    function addInView(trigger, cssClass, vpoffset) {
        if (isScrolledIntoView(trigger, vpoffset)) {
            if (!$(trigger).hasClass(cssClass)) {
                $(trigger).addClass(cssClass);
            }
        }
    }

};

})(jQuery);

//インスタンス化

$('#one').gAppear({ slideDirection: "slideright", slideDuration: 0.1 });

$('#two').gAppear({ slideDirection: "slideleft" });

于 2013-11-20T12:19:06.387 に答える