JQuery перебрать функцию несколько раз с разными параметрами

Question

Для сайта, над которым я работаю, мне нужно добавить класс для элемента, когда он прокручивается в поле зрения. На странице есть несколько элементов, для которых это должно работать.

Я настроил скрипку, показывающую, как она работает: 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);
}

Мне было интересно, есть ли лучший способ запустить эту функцию несколько раз, как при загрузке страницы, так и при ее прокрутке. Я думал о создании многомерного массива и его циклическом цикле, но никак не мог сообразить его.

Спасибо

Answer 1

Ну, на части цикла цикла, вы можете иметь это

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

Где section[id] соответствует всему элементу section, у которого есть id. Вы должны использовать класс css и стараться избегать идентификаторов настолько, насколько это возможно.

Каждый из них выполняет итерации по этим элементам, используя функцию с i = index и e = element.

Кроме этого, вы регистрируете событие прокрутки в окне для каждого элемента, который у вас есть, и это не хорошо. Желательно зарегистрировать только одно событие и там выполнить необходимую работу. Может быть, найти другой тип события (не уверен, что это будет работать http://api.jquery.com/visible-selector/)

Answer 2

(Функция ($) {

$.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);

// Instantiate

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

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